css层次选择器

首先定义好层次，在html的body标签下定义以下元素

<body>
<p>p0</p>
<p class="test">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p class="test">p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="test">p7</p>
<p>p8</p>
</body>

1.后代选择器

<!-- 后代选择器 在某个元素后面 祖爷爷 爷爷 爸爸 你 -->
body p{
       background : red;
      }

运行结果如下：

发现body下面的p元素全部变成了红色

2.子选择器

<!-- 子选择器-一代-儿子 -->
body>p{
        background : blue;
      }

运行结果如下：

发现body下面的的儿子p元素全部变成了蓝色

3.相邻兄弟选择器

<!-- 相邻兄弟选择器 同辈 只有一个 相邻（向下） -->
.test + p{
     background : yellow;
}

运行结果如下：

只会有一个向下的相邻元素变成黄色

4.通用兄弟选择器

<!-- 通用兄弟选择器 当前选中元素所有向下的兄弟元素  -->
.test~p{
    background : green;
}

运行结果如下：

当前选中元素所有向下的兄弟元素都会变色

posted @ 2022-01-05 19:09  Dawn_006  阅读(43)  评论(0)    收藏  举报