跳到主要内容

选择器

笔者认为，选择器是 CSS 两大核心之一。丰富、强大的选择器赋予了 CSS 更高、更快的样式能力。

CSS 选择器用于根据 id、类、类型、属性等“选择”HTML 元素。它们用于设置网页元素的样式，是 Web 开发的重要组成部分。 CSS 选择器可用于为元素设置样式、将样式应用于一组元素，甚至可以在元素之间创建复杂的样式关系。

样式优先级​

通常，良好组织的代码不会需要考虑优先级（样式是单一来源，且不会产生歧义），但还是很有必要了解相关知识。

  • 在 id、class、内联样式都可以匹配到某个节点时，样式应用优先级为内联>
  • 在同一种选择器被多次使用时，根据文件加载顺序取最后加载的样式。

多选​

h1,
h2,
main > h3 {
    color: red;
}

多选的一个很常用的场景是：重设浏览器自带样式。浏览器提供的一些默认样式往往会给现代前端开发带来不必要的麻烦，我们可以在任何项目中先重设一下：


伪元素​

如果不熟悉伪类、伪元素，容易写出一些冗余的元素、代码。

我们先来看个例子：

伪类​

:has()​

选择符合特定条件的父元素，例如含有某个标签，匹配某个伪类等等：

figure:has(figcaption) {
    background: white;
    padding: 0.6rem;
}

form:has(:focus-visible) div:has(input:not(:focus-visible)) label {
    color: peru;
}

如果不熟悉伪类、伪元素，容易写出一些冗余的元素、代码。

我们来看几个例子：

p::first-letter {
    font-size: 3rem;
    font-weight: bold;
    color: red;
}

上面的代码就是使用伪元素，直接设置每个段落的第一个字母的样式，这样做可以使我们避免不必要的代码重复，尤其在设计精细的文本样式时，伪类和伪元素就显得尤为重要。

接下来我们看一些高级的用法：

p::before {
    content: "";
    display: block;
    margin-bottom: 10px;
}

p::after {
    content: "";
    display: block;
    margin-top: 10px;
}

上面的代码就是使用伪元素，可以为每个段落的头尾设置间距，从而达到很漂亮的视觉效果。

这是一个非常强大的功能，

扩展阅读​