CSS层次选择器
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
<!--1.后代选择器-->
body p{
background: red;
}
<!--2.子代选择器-->
body>p{
background:pink;
}
<!--3.相邻兄弟选择器-->
.one+p{
background:green;
}
<!--4.通用选择器-->
.one~p{
background:yellow;
}
</style>
</head>
<body>
<p class="one">h1</p>
<p>h2</p>
<p>h3</p>
<p>h4</p>
<ul>
<li>
<p>p1</p>
</li>
<li>
<p>p2</p>
</li>
<li>
<p>p3</p>
</li>
</ul>
</body>
</html>
1.后代选择器
E F { } 功能描述:影响的F元素被包含在E元素内(E影响下面所有层次的元素F)
只打开后代选择器的代码,不打开的都默认注释掉
/*后代选择器*/
body p{
background: red;
}
2.子代选择器
E>F { } 功能描述:影响的F是E的子元素(E影响下一层的元素F,仅仅是下一层的F)
打开后代选择器和子选择器
/*后代选择器*/
body p{
background: red;
}
/*子选择器*/
body>p{
background: pink;
}
可以看到只有p1p2p3变成了粉红色,说明子选择器生效,原因是只有p1p2p3才是body标签的儿子,p4p5p6并不是body标签的儿子,因为中间有ul和li标签。
其实此时p1p2p3依然受后代选择器的影响,但是由于子选择器在后代选择器后面,可以理解为后代选择器的影响被子选择器覆盖了
3.相邻兄弟选择器
后代选择器&子选择器&相邻兄弟选择器同时打开
E+F { } 功能描述:影响的F紧邻E后面(且E和F同一层次)
/*后代选择器*/
body p{
background: red;
}
/*子选择器*/
body>p{
background: pink;
}
/*/!*相邻兄弟选择器*!/*/
.active + p{
background: green;
}
因为p1的class属性是active,相邻兄弟选择器只对紧邻后面的元素生效
为了进一步验证相邻兄弟选择器的影响范围只影响紧邻后面的元素,而不是前后都影响或者其他,试试下面的栗子的结果
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>
4.通用选择器
四个选择器都打开
E+F { } 功能描述:E影响用一层次的所有F
/*后代选择器*/
body p{
background: red;
}
/*子选择器*/
body>p{
background: pink;
}
/*相邻兄弟选择器*/
.active + p{
background: green;
}
/*通用选择器*/
.active~p{
background: yellow;
}
由于还是h2的class=“active”,所以只有p3和p4被影响