一、“ ”空格 后代选择器
2个元素之间使用空格分开，为后代选择器。
<style>
div p{
color: red;
}
</style>
<div>
<p>我是p元素</p>
<span>我是span元素</span>
</div>
image.png
二、“>" 大于号 子代选择器
子代选择与后代选择器有些相似，但是子代选择器，只能选择一代，而后代会选择符合要求的所有后代
<style>
div>span{
color: blue;
}
</style>
<body>
<div>
<p>我是一级子代p元素<span>我的二级子代span</span></p>
<span>我是一级子代span元素</span>
</div>
</body>
image.png
三、“~”波浪号
a~b 表示同一父级的 a元素后面的 b元素,a,b为兄弟关系
<div>
<ul>
<li>我是p前</li>
<li>我是p前</li>
<li>我是p前</li>
</ul>
<p>我是p</p>
<ul>
<li>我是p后</li>
<li>我是p后</li>
<li>我是p后</li>
</ul>
</div>
image.png
四、“+” 加号，兄弟相邻选择器
a+b,选择紧接在 <a> 元素之后的所有 <b> 元素。
<style>
p +ul {
background: #ff0000;
}
</style>
<body>
<div>
<p>我是p</p>
<ul>
<li>我是p后</li>
<li>我是p后</li>
<li>我是p后</li>
</ul>
</div>
image.png
但是如果a与b不相邻，则不能被选择
<style>
p +ul {
background: #ff0000;
}
</style>
<body>
<div>
<p>我是p</p>
<div>我是p与ul之间的div</div>
<ul>
<li>我是p后</li>
<li>我是p后</li>
<li>我是p后</li>
</ul>
</div>
image.png
网友评论