CSS中各种选择器

基本选择器

通用选择器

选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。

语法：* ns|* *|*

例子：* 将匹配文档的所有元素。

（性能一般，不建议太多使用）

元素选择器

类选择器

ID选择器

属性选择器

语法

/* 存在 title 属性的 <a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{
  color: green;
}

/* 存在 href 属性并且属性值包含"example"的 <a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的 <a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在 class 属性并且属性值包含单词"logo"作为一个独立的单词的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value][attr$=value] [attr*=value]

分组选择器

选择器列表

, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。

语法：A, B

示例：div, span 会同时匹配 <span> 元素和 <div> 元素。

组合器

后代组合器

“ ”（空格）组合器选择前一个元素的后代节点。

语法：A B

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

直接子代组合器

> 组合器选择前一个元素的直接子代的节点。

语法：A > B

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

一般兄弟组合器

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

语法：A ~ B

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

紧邻兄弟组合器

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

语法：A + B

例子：h2 + p 会匹配紧邻在 <h2> 元素后的第一个 <p> 元素。

伪选择器

伪类

: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。

伪元素

:: 伪选择器用于表示无法用 HTML 语义表达的实体。