CSS 选择器和组合器

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

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

类选择器 选择所有具有给定 class 属性的元素，该属性由以句点 (.) 为前缀的类名表示。例如，.index 将匹配任何具有 class="index" 的元素。 ID 选择器 根据元素的 id 属性的值选择元素。选择器是以“数字符号”(U+0023, #) 为前缀的 id。例如，#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，则所有匹配 B 的元素都将被选中，前提是 A 和 B 共享同一个父元素。例如，h2 ~ p 将匹配所有紧随 h2 的 <p> 元素，无论是否紧邻。

下一个兄弟组合器，用加号 (+) 表示，类似于后续兄弟组合器。但是，给定 A + B，只有当 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 嵌套复制相同的五个相对选择器。

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 嵌套模块