后代选择器
后代选择器用于选取某元素的后代元素。
代码
<div>
<p>这是一个p标签</p>
</div>
样式
div p{
color: red;
}
子元素选择器
与后代选择器相比,子元素选择器只能选择作为某元素直接/一级子元素的元素。
代码
<div id="a">
<p>这是一个p标签</p>
<div>
<p>这是一个p标签</p>
</div>
</div>
样式
#a>p{
color: red;
}
相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。
代码
<div></div>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
样式
div+p{
color: red;
}
后续兄弟选择器
后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。
代码
<div></div>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
样式
div~p{
color: red;
}