你可能会错过的CSS伪类

2020-04-27

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

-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伪类
作者:LiuKang
地址:http://kanglucky.cn/articles/2020/04/27/1587980763140.html

评论
发表评论