CSS 高级选择器完全指南

2023-03-16 微信公众号前端充电宝

在 css 中，选择器是选取需设置样式的元素的模式。今天就来看看 CSS 中的高级选择器以及实用技巧！

一、基础选择器

在说高级选择器之前，先来回顾一下CSS中的基础选择器。

最常见的 CSS 选择器就是元素选择器。选择器通常将是某个 html 元素：

h1 {
  color: red;
  font-size: 50px;
}

在 W3C 标准中，元素选择器又称为类型选择器（type selector）。类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。

id 选择器用来指定具有ID的元素的样式。ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

#my_id {
  color: red;
  font-size: 50px;
}

需要注意，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。并且 ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。类选择器也是我们最常用的选择器之一。

.my_class {
  color: red;
  font-size: 50px;
}

在CSS中，一个星号(*)就是一个通配选择器，之所以如此命名，是因为它普遍适用于所有元素，可以匹配任意类型的HTML元素。那通配符选择器有啥实际应用呢？其会常用于全局样式重置，比如 CSS 盒子模型重置：

*,
*::before,
*::after {
  box-sizing: border-box;
}

这意味着我们希望所有元素在盒子模型计算中包括padding和border，而不是将这些宽度添加到任何定义的尺寸。例如，在以下规则中，.box宽度将是200px，而不是200px + 20px：

.box {
  width: 200px;
  padding: 10px;
}

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。这是一个非常强大的选择器，但是通常没有充分发挥其潜力。CSS 属性选择器可以获得类似于正则表达式的匹配结果。这对于修改 BEM 风格的系统或其他使用相关类名但可能不是单个通用类名的框架非常有用。来看一个例子：

[class*="component_"]

这个选择器将选择所有具有包含 component_ 字符串的类的元素。

可以通过在关闭属性选择器之前包含 i 来确保匹配不区分大小写：

[class*="component_" i]

当然我们也可以不指定属性值，而是简单的检查它是否存在，例如下面的选择器会选择具有任何class值的所有 a 标签：

a[class]

属性选择器可以用来执行一些基本的可访问性检查，例如：

img:not([alt]) {
  outline: 2px solid red;
}

这将为所有不包含 alt 属性的图像添加轮廓。

当使用 > 选择符分隔两个元素时，它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素。子组合选择器是唯一处理元素级别的选择器，并且可以组合以选择嵌套元素。

✅ 选择 article > p。

<article>
  <p>Hello world</p>
</article>