6 层次选择器

/*层次选择器:
1.后代选择器
2.子选择器
3.相邻弟弟选择器
4.通用弟弟选择器
*/

/*1.后代选择器:在某个元素后面所有的指定元素*/
/*body p{*/
/*    background: red;*/
/*}*/


/*2.子选择器:在某个元素后面所有的第一代指定元素*/
/*body>p{*/
/*    background: red;*/
/*}*/

/*3.相邻弟弟选择器:就同一级别向下的一个指定元素*/
/*.active+p{*/
/*    background: red;*/
/*}*/

/*4.通用弟弟选择器:就同一级别向下的全部指定元素*/
.active~p{
    background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <link rel="stylesheet" href="css/style1.css">
</head>

<body>
<p>0</p>
<p class="active">1</p>
<p>2</p>
<p>3</p>
<ul>
    <li><p>4</p></li>
    <li><p>5</p></li>
    <li><p>6</p></li>
</ul>
<p>7</p>
</body>

</html>

posted @ 2023-09-18 15:45  被占用的小海海  阅读(12)  评论(0编辑  收藏  举报