CSS扩展选择器
CSS扩展选择器是一种特殊的选择器，它可以根据元素在其位置的上下文关系来选择元素。这些选择器包括：
- 子选择器（Child Selector）
E > F：选择作为E元素子元素的F元素。 - 后代选择器（Descendant Selector）
E F：选择E元素内的所有F元素，不仅限于子元素。 - 相邻兄弟选择器（Adjacent Sibling Selector）
E + F：选择紧跟在E元素之后的F元素。 - 通用兄弟选择器（General Sibling Selector）
E ~ F：选择E元素之后的所有F元素。
实例代码：
/* 子选择器 */
div > p {
color: red;
}
/* 后代选择器 */
div p {
color: blue;
}
/* 相邻兄弟选择器 */
p + div {
color: green;
}
/* 通用兄弟选择器 */
p ~ div {
color: purple;
}HTML示例：
<div>
<p>我是红色，因为我是直接子元素。</p>
<span>我不会变色。</span>
<div>我是蓝色，因为我是后代元素。</div>
</div>
<p>紧跟在我之后的Div将是绿色。</p>
<div>我是绿色，因为我是相邻兄弟元素。</div>
<div>我也是绿色，因为我是通用兄弟元素。</div>
评论已关闭