你可能忽略的 CSS 伪选择器

234 阅读5分钟

经常被忽视的 CSS 伪选择器.

img

(伪)选择器允许你将样式设置到实际上是由某些元素的状态或文档中的标记模式甚至文档本身的状态推断出的虚拟类上。.

— CSS 权威指南:Eric Meyer、Estelle Weyl

这篇文章鼓励在构建 UI 时更多的使用 CSS 和更少的 JS。 熟悉 CSS 所提供的能力是实现这一目标的一种方法——另一种方法是尽可能多地实施最佳实践并重用该代码。

伪选择器分为以下类别:伪类和伪元素。

伪类的作用就像附加到一个元素上的类并可以在此基础上为元素设置样式,而伪元素的作用就好像一个元素被注入到另一个元素中,并且只对注入的元素进行了样式设置。

伪类使用双冒号 :: 表示,而伪元素使用单个冒号 :。(**注:**原文表达错误,根据 MDN,伪类由单冒号表示,伪元素为双冒号)

要重用你的 UI 组件,可以试试使用云组件中心,例如 Bit.dev。 使用它来发布、记录和组织你团队里所有可重用 UI 组件。 这种方式不仅构建更快,还是一种更好的构建方式,因为它鼓励你对代码进行标准化和模块化。

img

探索 bit.dev 上共享的 UI 组件

::first-line |选择第一行文本

这个伪选择器影响换行符之前的第一行文本。 它仅对其中的第一行文本进行样式设置,就好像有一个元素包裹了这部分文本。

p::first-line {
    color: lightcoral;
}

::first-letter | 选择第一个字符

这个伪选择器应用于元素中文本的第一个字符

.innerDiv p::first-letter {
    color: lightcoral;
    font-size: 40px
}

::selection |选择高亮(选定)区域

这个伪选择器应用于用户选定的区域

使用 ::selection 伪选择器,我们可以为高亮区域应用样式。

div::selection {
    background: yellow;
}

:root | 根元素

:root 伪类选择文档的根元素。 在 HTML 中,它始终是 HTML 元素。 在 RSS 中,它是 RSS 元素。

这个伪选择器最常用于使用 CSS 变量存储全局变量,因为它适用于根元素。

:empty |仅当项目为空时适用

这个伪选择器将选择没有任何子元素的元素。 该元素必须为空。 如果元素没有空格、可见内容或后代元素,则该元素为空。

div:empty {
    border: 2px solid orange;
}<div></div>
<div></div>
<div>
</div>

这个规则会应用在空的 div 元素上,也就是第二个和第三个 div,它们是真正的空元素,而第三个 div 因为有空格,所以不是空元素。

:only-child | 选中仅有的子元素

这适用于作为其父元素唯一子元素的元素。

.innerDiv p:only-child {
    color: orangered;
}

:first-of-type | 选择符合指定类型的第一个子元素

p:first-of-type {
    color: orangered;
}

这将选择作为另一个元素内第一段的段落,就好像一个类已添加到这个段落本身。

.innerDiv p:first-of-type {
    color: orangered;
}

这将适用于 .innerDiv 的第一个 p 段落子元素。

<div class="innerDiv">
    <div>Div1</div>
    <p>These are the necessary steps</p>
    <p>hiya</p>
    
    <p>
        Do <em>not</em> push the brake at the same time as the accelerator.
    </p>
    <div>Div2</div>
</div>

("These are the necessary step") 这一段内容会被选中

:last-of-type | 选择符合指定类型的最后一个子元素

:first-of-type 类似, 但这会影响相同类型的最后一个子元素。

.innerDiv p:last-of-type {
    color: orangered;
}

这会应用在 innerDiv 中最后一个 p 类型的子元素上。

<div class="innerDiv">
    <p>These are the necessary steps</p>
    <p>hiya</p>
    <div>Div1</div>
    <p>
        Do the same.
    </p>
    <div>Div2</div>
</div>

所以 p 元素 ("Do the same") 会被选中

:nth-of-type() | 选中符合指定类型的子元素

这个选择器会选中特定父元素里某个指定类型的子元素

.innerDiv p:nth-of-type(1) {
    color: orangered;
}

:nth-last-of-type() | 从列表里倒序选择某个类型的子元素

会选中指定类型的最后一个元素

.innerDiv p:nth-last-of-type() {
    color: orangered;
}

这个规则会选中在 innerDiv 内部最后一个 p 标签子元素

<div class="innerDiv">
    <p>These are the necessary steps</p>
    <p>hiya</p>
    <div>Div1</div>
    <p>
        Do the same.
    </p>
    <div>Div2</div>
</div>

p 标签 Do the sameinnerDiv 中的最后一个段落元素,因此它会被选中并应用css样式。

:link | 选中没有访问过的超链接

这个选择器适用于没有访问过的链接。 主要与带有 href 属性的 a 标签一起使用。

a:link {
    color: orangered;
}<a href="/login">Login<a>

这会设置所有带有 href 属性的且没有点击访问过的 a 标签为橙色文本。

:checked | 选择选中的复选框

这适用于已选中的复选框。

input:checked {
    border: 2px solid lightcoral;
}

这个规则适用于所有已单击选中的复选框。

:valid | 选择有效的元素

这主要用在表单上来为通过用户验证规则的表单元素设置样式。 当验证通过时,会为默认元素设置 valid 属性。

input:valid {
    boder-color: lightsalmon;
}

:invalid | 选择无效的元素

:valid 相同,但这将适用于未通过验证规则的元素。

input[type="text"]:invalid {
    border-color: red;
}

:lang() | 按指定的 lang 值选择元素

这适用于指定了特定语言的元素。

它可以通过以下两种方式设置:

p:lang(fr) {
    background: yellow;
}

p[lang|="fr"] {
    background: yellow;
}<p lang="fr">Paragraph 1</p>

:not() | 否定后面的选择器(这是一个运算符)

否定伪选择器选择不符合特定规则的。

让我们看一个例子:

.innerDiv :not(p) {
    color: lightcoral;
}<div class="innerDiv">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <div>Div 1</div>
    <p>Paragraph 3</p>
    <div>Div 2</div>
</div>

Div 1Div 2 会被选中,因为它们不是 p 标签

总结

到这里我们就介绍完了。 还有更多的伪选择器,但它们不是标准规范里的,所以我没有介绍它们。

谢谢!!