CSS基础----层次选择器

层次选择器

    • 测试代码
    • 后代选择器
    • 子选择器
    • 相邻兄弟选择器
    • 通用兄弟选择器

测试代码

在这里插入图片描述

后代选择器

E F { } 功能描述：影响的F元素被包含在E元素内（E影响下面所有层次的元素F）

只打开后代选择器的代码，不打开的都默认注释掉

/*后代选择器*/
body p{
	background: red;
}

可以看到body标签下的所有p标签都被影响
只打开后代选择器的代码

子选择器

E>F { } 功能描述：影响的F是E的子元素（E影响下一层的元素F，仅仅是下一层的F）

打开后代选择器和子选择器

/*后代选择器*/
body p{
	background: red;
}
/*子选择器*/
body>p{
	background: pink;
}

可以看到只有p1p2p3变成了粉红色，说明子选择器生效，原因是只有p1p2p3才是body标签的儿子，p4p5p6并不是body标签的儿子，因为中间有ul和li标签。
其实此时p1p2p3依然受后代选择器的影响，但是由于子选择器在后代选择器后面，可以理解为后代选择器的影响被子选择器覆盖了
在这里插入图片描述

相邻兄弟选择器

后代选择器&子选择器&相邻兄弟选择器同时打开

E+F { } 功能描述：影响的F紧邻E后面（且E和F同一层次）

/*后代选择器*/
body p{
	background: red;
}
/*子选择器*/
body>p{
	background: pink;
}
/*/!*相邻兄弟选择器*!/*/
.active + p{
	background: green;
}

因为p1的class属性是active，相邻兄弟选择器只对紧邻后面的元素生效
在这里插入图片描述
为了进一步验证相邻兄弟选择器的影响范围只影响紧邻后面的元素，而不是前后都影响或者其他，试试下面的栗子的结果

p1


p2


p3


p4

在这里插入图片描述

通用兄弟选择器

四个选择器都打开

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被影响
在这里插入图片描述

相关

标签