CSS中什么是层级选择器？

百变鹏仔 3个月前 (09-20) #CSS

文章标签层级

在之前的文章《css-tutorial-494585.html" target="_blank">详解css的基本选择器，并聊聊选择器优先级》中，我们了解了css中的基本选择器，下面本篇文章我们聊聊层级选择器，希望对大家有所帮助！

层级选择器

CSS层级选择器是根据HTML节点树之间的关系提供的选择器用法，所以说如果想要很好的学习层级选择器 首先要搞清楚HMTL元素之间的关系是什么样子的。【推荐学习：css视频教程】

先看下面这段HTML代码：

nbsp;html&gt;    <meta>    <meta>    <title>HTML测试代码</title>    <div>        <p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>        <p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>    </div>    <div>        <span></span>        <button></button>        <span></span>    </div>

将如上代码可以画成如下节点树，如下图所示

现在来我们看一个HTML元素之间的关系，在HTML页面中元素之间的关系存在着如下所示的三种关系：

选择符

CSS提供的4个选择符，对应着CSS层级选择题的四种用法，如下所示

在Web开发中，用的较多的是前两个-后代选择器和子选择器。

我们先来看一段代码：

<!DOCTYPE html>        <html>          <head>            <meta charset="utf-8">            <title>使用CSS3层次选择器</title>            <style type="text/css">              * {margin:0;padding:0;}              body {width: 300px; margin:0 auto;}              div{margin:5px;padding:5px;border:1px solid #ccc;}            </style>          </head>          <body>            <div>1</div>            <div>2</div>            <div>3</div>            <div>4              <div>5</div>              <div>6</div>            </div>            <div>7              <div>8                <div>9                  <div>10</div>                </div>              </div>            </div>          </body>        </html>

后代选择器

用来选择某个元素的所有的后代元素，比如上面的html中，使用如下的样式，会产生什么效果呢？

body div { background-color: yellow; }

这里将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）设置了背景色为粉红色。

（学习视频分享：web前端入门）

文章推荐

CSS中什么是层级选择器？

层级选择器

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写