CSS 选择器

组合器

后代组合器

（空格）组合器选取某元素的后代元素。

语法：A B

例子：div span 匹配所有位于任意 <div> 元素之内的 span 元素。

直接子代组合器

> 组合器选取某元素的子元素。

语法：A > B

例子：ul > li 匹配直接嵌套在 <ul> 元素之内的所有 <li> 元素。

一般兄弟组合器

~ 组合器选择兄弟元素，也就是说，后一个元素在前一个元素后面的任意位置，并且共享同一个父节点。

语法：A ~ B

例子：p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素。

紧邻兄弟组合器

+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。

语法：A + B

例子：h1 + p 匹配所有紧邻在 <h1> 元素之后的 <p> 元素。

伪选择器

伪类

指定被选择元素的特殊状态。

语法：

1
2
3
selector:pseudo-class {
  property: value;
}

实例：

1
<p>把鼠标移到<span class="custom1">我</span>的上面~</p>
1
2
3
span.custom1:hover {
  color:red;
}
效果

把鼠标移到我的上面~

伪元素

对被选择元素的特定部分进行样式的修改。

语法：

1
2
3
selector::pseudo-element {
  property: value;
}

实例：

1
<p class="custom2">选择这句话中的文本~</p>
1
2
3
4
p.custom2::selection {
  color: red;
  background-color: yellow;
}
效果

选择这句话中的文本~

😕