在之前的文章《
将如上代码可以画成如下节点树，如下图所示
现在来我们看一个HTML元素之间的关系，在HTML页面中元素之间的关系存在着如下所示的三种关系：
*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通
这里将body元素的后代div元素设置背景色为yellow。也就是说，所有的div都被染上了黄色。
子选择器
用于选择某个元素下（可能是多个元素）所有的一级子元素。比如，我们使用下面的选择器及样式，会有什么效果呢？
body > div { background-color: red; }
这样设置后，body下的一级div元素，这里是内容为1、2、3、4、7的div元素设置背景色为红色。
相邻兄弟选择器
用于选取某个（或某些）元素同级目录下的下一个元素。比如，这里我们使用下面样式设置后的效果是什么样的呢？
.active + div { background-color: green; }
这里我们设置了.active选择器的相邻兄弟节点，也就是第二个div元素，将其背景色设置为了绿色。
通用兄弟选择器
用于选取某个（或某些）元素的同级目录下所有的后面的标记。它和相邻兄弟选择器类似，需要在同一个父元素中。
比如使用下面的代码，影响到的样式：
.active ~ div { background-color: pink; }
这里将类名为”active”的元素（这里为第一个div）的通用兄弟（这里是内容为2、3、4、7的div）设置了背景色为粉红色。
（学习视频分享：以上就是CSS中什么是层级选择器？怎么用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1624529.html
微信扫一扫
支付宝扫一扫
在之前的文章《css中什么是层级选择器？怎么用？》中，我们学习了4种层级选择器，下面我们聊聊伪选择器，它们提供了更复杂的功能，但非直接对应html文档应以的元素。伪选择器主要分两种：伪元素和伪类。下面我们先详细聊聊伪元素选择器。 伪元素选择器 CSS中伪元素选择器 的是在指定CSS选择器增加关键字。…
本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于如何解决div外边距重合的相关问题，外边距的重叠只产生在普通流文档的上下外边距之间，只有块元素会发生外边距重叠，行内元素和行内块元素都不会发生外边距重叠问题，下面一起来看一下，希望对大家有帮助。 （学习视频分享：css视频教程、html视频…
本篇文章给大家带来了关于css的相关知识，其中给大家介绍了关于盒子大小与内外边距及边框关系的相关问题，css学习三大重点是css盒子模型、浮动、定位，下面一起来看一下，希望对大家有帮助。 （学习视频分享：css视频教程、html视频教程） 3-11 盒子大小与内外边距及边框的关系 盒子模型…
在之前的文章《css伪选择器学习之伪元素选择器解析》中，我们学习了伪元素选择器，而今天我们详细了解一下伪类选择器，希望对大家有所帮助！ 伪类选择器 伪类选择器 是一种允许通过未包含在HTML元素的状态信息来定位HTML元素的用法。伪类选择器 的具体用法就是向已有的选择器增加关键字，表示定位的HTML…
本篇文章给大家带来了关于css的相关知识，其中主要介绍了css盒子模型以及box-sizing属性的相关问题，box-sizing属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等，下面一起来看一下，希望对大家有帮助。 （学习视频分享：css视频教程、ht…
UI状态伪类选择器，用于选择处于某种状态下的UI元素，主要用于HTML表单上，根据表单元素的不同状态，定义不同的样式，来增强用户体验。 UI状态伪类选择器的特征：指定的样式只有在某种状态下才起作用 表单元素的状态包括获得焦点、失去焦点、选中、未选中、可用、不可用、有效、无效、必填、选填、只读等等。 …
本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于css伸缩盒布局的相关问题，一个元素设置 css 属性 display:flex 或者 display:inline-flex ，该元素就变为伸缩容器，下面一起来看一下，希望对大家有帮助。 （学习视频分享：css视频教程、html视频教程）…
字体设置是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。css 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。 【推荐学习：css视频教程】 css font字体属性 属性 说明 CSS font在一个声明中设置所有字体属性1font…
本篇文章给大家带来了关于css的相关知识，其中主要介绍了径向渐变的相关问题，径向渐变可以理解为有了半径值的渐变，即最终的效果不再是沿着一条直线轴进行渐变。最终实现的效果是圆形或者椭圆形，下面一起来看一下，希望对大家有帮助。 （学习视频分享：css视频教程、html视频教程） 径向渐变可以理解为有了半…
本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于transform变换和transitions过渡的相关问题，一起看看css实现盒子的转换与过渡效果，希望对大家有帮助。 （学习视频分享：css视频教程、html视频教程） transform变换 语法： transform: rotate…
css/editerView/ck_htmledit_views-b3c43d3711.css”/> 前言导航栏之前也做过……但都是很简单的一级导航栏或者用jq实现的二级导航栏。但是关于页面展示的东西，还是应该由css来实现，javascript应该多负责动作。【推荐：css视频教…
本篇文章带大家了解一下css content-visibility属性，聊聊使用该属性怎么优化渲染性能，希望对大家有所帮助！ 最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。 这是一个比较新且有强大功能的属性。本文将带领大家深入理解一番。【推荐学习：css视频教程…
本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮，希望对大家有所帮助！ 怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？ 本文基于一些高频出现在设计稿中的，使用 css 实现稍微有点难度和技巧性的按钮，讲解使用 css 如何尽可能的实现它们。【推荐学习：…
什么是白噪声？css中如何利用柏林噪声绘制炫酷图形？下面本篇文章给大家介绍一下利用噪声构建美妙的 css 图形的方法，希望对大家有所帮助！ 在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。【推荐学习：css视频教程】 我们首先来看一个简单的例子。首先，假设我们实现一个 10×10 …
怎么利用css实现圆角及波浪效果？下面本篇文章带大家了解一下怎么巧用css滤镜构建圆角及波浪效果，希望对大家有所帮助！ 本文，将另辟蹊径，介绍一种使用滤镜去构建圆角的独特方式。【推荐学习：css视频教程】 首先，我们来看这样一个图形： 立即学习“前端免费学习笔记（深入）”； 一个矩形，没什么特别的，…
如何使用css实现更加立体的阴影效果？下面本篇文章给大家聊聊css 阴影进阶，介绍一下巧用使用css实现立体阴影效果的方法，希望对大家有所帮助！ CSS 阴影的存在，让物体看上去更加有型立体。【推荐学习：css视频教程】 然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。 C…
本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于设置元素高度和宽度属性的相关问题，height和width属性用于设置元素的高度和宽度，height和width属性不包括内边距、边框或外边距。下面一起来看一下，希望对大家有帮助。. （学习视频分享：css视频教程、html视频教程） CS…
本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于css定位属性中fixed 定位的相关问题，fixed定位表示元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动，下面一起来看一下，希望对大家有帮助。 （学习视频分享：css视频教程、html视频教程） CSS定位属性之固定…
本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于css定位属性中relative相对定位的相关问题，相对定位是元素在移动位置的时候，是相对于它原来的位置来说的，设置为相对定位的元素框会偏移某个距离，下面一起来看一下，希望对大家有帮助。 （学习视频分享：css视频教程、html视频教程） …
本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于css的绝对定位和相对定位的相关问题，相对定位是元素在移动位置的时候，是相对于它原来的位置来说的，绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的，下面一起来看一下，希望对大家有帮助。 （学习视频分享：css视频教程、html视频…
