你可能会错过的 CSS 伪类

本贴最后更新于 1669 天前,其中的信息可能已经东海扬尘

(伪)选择器使您可以将样式分配给实际上是由某些元素的状态,文档中的标记模式甚至文档本身的状态推断出的幻影类。

-CSS:权威指南:Eric Meyer,Estelle Weyl

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

::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,因为它具有空格。

:only-child | 选择一个独生子女

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

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

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

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

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

<div class="innerDiv">
    <div>Div1</div>
    <p>这些是必要的步骤</p>
    <p>嗨</p>
    <p>
        Do <em>not</em> 在踩油门的同时踩下制动器
    </p>
    <div>Div2</div>
</div>

选择 p(“这些是必要的步骤”)。

:last-of-type | 选择指定类型的 ast 子元素

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

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

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

该选择器将从指定的父元素列表中选择某种类型的元素。

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

:nth-last-of-type() | 在列表末尾选择类型的子元素

这将选择特定类型的最后一个子元素。

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

这将选择该元素中包含的列表 innerDiv 以及类型为段落元素的列表中的最后一个子元素。

结论

伪选择器其实还有很多,但是它们不是常用的,因此就没一一列举介绍它们。
最后非常感谢收看,一起遨游知识的海洋 😊😊

参考文献

  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...