CSS 选择器和组合器

选择器的类型

有超过 80 种选择器和组合器。根据可选择的元素类型，CSS 选择器可分为以下几类。

基本选择器

类型选择器用于选择所有具有给定节点名称的元素。例如，div 将选择所有 <div> 元素，而 input 将匹配任何 <input> 元素。通配选择器用星号（*）表示，是一种特殊的类型选择器，用于选择所有元素。

类选择器用于选择所有具有给定 class 属性的元素，其表示方法为在类名前加上一个句点（.）。例如，.index 将匹配任何具有 class="index" 的元素。ID 选择器根据元素的 id 属性值来选择元素。其选择器为 id 前加上一个“井号”（U+0023，#）。例如，#toc 将匹配具有 id="toc" 的元素。class 和 id 都是全局属性。一个文档中应该只有一个具有给定 id 的元素；但如果存在多个，ID 选择器将匹配所有具有该 id 的元素。

当将类型选择器或通配选择器与类选择器或 ID 选择器组合成复合选择器时，类型选择器或通配选择器必须在类或 ID 之前。

CSS

在这个例子中，我们使用上述四种基本选择器类型，声明了四个简单选择器和一个复合选择器。

* {
  font-style: italic;
}
p {
  color: red;
}
.myClass {
  text-decoration: underline;
}
#myId {
  font-family: monospace;
}
p.myClass#myId {
  font-size: 1.5rem;
}

HTML

<p class="myClass" id="myId">I match everything.</p>
<p>I match the universal and type selectors only.</p>

结果

组合器

使用 CSS 组合器，我们可以组合选择器，根据 DOM 节点与文档节点树中其他元素的关系来选择它们。这种选择器与组合器的结合创建了复杂选择器。

后代组合器

后代组合器，用一个或多个空格表示，选择作为第一个元素的后代节点。例如，div span 将匹配所有位于 <div> 元素内部的 <span> 元素。

子组合器

子组合器比后代组合器更具体。子组合器用大于号（>）表示，选择作为第一个元素的直接子节点的节点。与前面的例子相比，div > span 将只匹配作为 <div> 元素直接子元素的 <span> 元素。

后续兄弟组合器

除了后代选择器，CSS 还允许根据兄弟元素来选择元素。后续兄弟组合器用波浪号（~）表示，用于选择兄弟元素。对于 A ~ B，如果匹配 B 的所有元素前面有 A，并且 A 和 B 共享同一个父元素，那么这些 B 元素都将被选中。例如，h2 ~ p 将匹配所有跟在 h2 后面的 <p> 元素，无论是否紧邻。

相邻兄弟组合器

相邻兄弟组合器用加号（+）表示，与后续兄弟组合器类似。但是，对于 A + B，它只匹配紧跟在 A 后面的 B，且两者共享同一个父元素。修改我们之前的例子，h2 + p 将只匹配紧跟在 <h2> 元素后面的那一个 <p> 元素。

列组合器

还有一个列组合器，用两个竖线（||）表示，在受支持的情况下，用于选择属于某一列的节点。例如，col || td 将匹配所有属于 <col> 作用域的 <td> 元素。

命名空间分隔符

命名空间分隔符是另一种组合器，通常与 @namespace 规则一起使用。该组合器由一个竖线（|）表示。它能够将类型选择器和通配选择器限制在特定的命名空间内。例如，通过定义一个命名空间，如 @namespace SVG url('http://www.w3.org/2000/svg');，你可以使用仅针对嵌套在 SVG 命名空间中的元素的选择器。声明 SVG|a 将匹配 SVG 中的链接，而不是文档其余部分的链接。命名空间对于在 HTML 中定位 MathML、SVG 或其他基于 XML 的内容非常有用。

CSS

在这个例子中，我们使用简单选择器和组合器声明了五个关系选择器。

h2 + p ~ p {
  font-style: italic;
}
h2 + p + p {
  color: red;
}
.myClass + p {
  text-decoration: underline;
}
#myId > .myClass {
  outline: 3px dashed red;
}
* > p {
  font-size: 1.1rem;
}

HTML

<h2 class="myClass" id="myId">
  No selectors match. <span class="myClass">This span has an outline</span> as
  it is both myClass and a child of #myId.
</h2>
<p>The first paragraph is underlined. All the paragraphs are 1.1rem.</p>
<p>
  The second paragraph is red. This and the following paragraphs are italic.
</p>
<p>The third paragraph is NOT red. It is italic and 1.1rem.</p>
<p class="myClass">
  Does not have an outline; this is a sibling of H2, not a child. It is italic
  and 1.1rem.
</p>

结果

使用 CSS 嵌套创建复杂选择器

上述复杂选择器也可以使用简单选择器、组合器和 CSS 嵌套来定义，无论是否使用 & 嵌套选择器。

CSS

在这个例子中，我们使用简单选择器和组合器复制了相同的五个关系选择器，但这次使用了 CSS 嵌套。

h2 {
  & + p {
    & ~ p {
      font-style: italic;
    }
    & + p {
      color: red;
    }
  }
}
.myClass {
  & + p {
    text-decoration: underline;
  }
}
#myId {
  & > .myClass {
    outline: 3px dashed red;
  }
}
* {
  & > p {
    font-size: 1.1rem;
  }
}

HTML

<h2 class="myClass" id="myId">
  No selectors match. <span class="myClass">This span has an outline</span> as
  it is both myClass and a child of #myId.
</h2>
<p>The first paragraph is underlined. All the paragraphs are 1.1rem.</p>
<p>
  The second paragraph is red. This and the following paragraphs are italic.
</p>
<p>The third paragraph is NOT red. It is italic and 1.1rem.</p>
<p class="myClass">
  Does not have an outline; this is a sibling of H2, not a child. It is italic
  and 1.1rem.
</p>

结果

属性选择器

属性选择器用于选择所有具有给定属性或属性值与子字符串匹配的元素，具体取决于选择器的写法。例如，[type] 将匹配所有设置了 type 属性（任何值）的元素，而 [type="submit"] 将匹配 <input type="submit"> 和 <button type="submit">，或任何设置了 type="submit" 的元素，即使这个属性值对只在 <input> 和 <button> 元素上受支持。匹配是大小写不敏感的。

属性的大小写敏感性取决于语言。通常，在 HTML 中，如果一个属性是枚举的，那么选择器中的值是大小写不敏感的，即使该值不是枚举值之一，或者该属性对于设置它的元素来说不是一个有效值。对于非枚举属性，如 class、id 或任何 data-* 属性，或者对于非 HTML 属性，如 role 或 aria-* 属性，值的匹配是大小写敏感的；可以通过大小写不敏感修饰符（i）使其不区分大小写。

伪类选择器

CSS 选择器模块定义了超过 60 种伪类。伪类是简单选择器，以冒号（:）为前缀，允许根据文档树中不包含的状态信息来选择元素。伪类可用于根据元素的状态来设置样式。例如，:target 简单选择器用于定位 URL 中包含片段标识符的元素，而 a:visited 复合选择器则匹配所有用户已访问过的 <a> 元素。

伪类可以分为元素显示状态、输入、语言、位置、资源状态、时间维度、树结构、用户行为和功能性伪类。

多个伪类可以组合成复合选择器。当将伪类与类型选择器或通配选择器组合成复合选择器时，伪类必须跟在类型选择器或通配选择器（如果存在）之后。

伪元素选择器

并非所有的 CSS 选择器都在CSS 选择器模块中定义。CSS 伪元素选择器是在 CSS 伪元素模块中定义的。

CSS 伪元素以两个冒号（::）为前缀，代表不包含在 HTML 中的实体。例如，简单的 ::marker 选择器用于选择列表项的项目符号，而复合选择器 p::first-line 则匹配所有 <p> 元素的第一行。

规范

有关伪类和伪元素的详细信息，请参阅其规范表。

另见

• 选择器列表
• CSS 选择器结构
• 优先级
• CSS 嵌套模块