0%

冷门但好用的伪类选择器


伪类选择器我们常用的就是after或者beffore,今天看点不一样

::first-line | 选择首行文本

这个伪元素选择器选择换行之前文本的首行。

1
2
3
p:first-line {
color: lightcoral;
}

::first-letter | 选择首字母

这个伪元素选择器应用于元素中文本的首字母。

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

::selection | 选择高亮(被选中)的区域

应用于任何被用户选中的高亮区域。通过::selection伪元素选择器,我们可以将样式应用于高亮区域。

1
2
3
div::selection {
background: yellow;
}

:root | 根元素

:root伪类选中文档的根元素。在 HTML 中,为 HTML 元素。在 RSS 中,则为 RSS 元素.这个伪类选择器应用于根元素,多用于存储全局 CSS 自定义属性。

在CSS变量学习的时候,我们就用过这个

:empty | 仅当元素为空时触发

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

1
2
3
4
5
6
7
8
div:empty {
border: 2px solid orange;
}

<div></div>
<div></div>
<div>
</div>

这个规则将应用于空的div元素。这个规则将应用于第一个和第二个div,因为他们是真为空,而第三个div包含空格。

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

匹配父元素中没有任何兄弟元素的子元素。

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

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

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

这将应用于.innerDiv下的第一个p元素。

1
2
3
4
5
6
7
8
9
10
<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>

这个p(“These are the necessary step”)将被选中。

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

像:first-of-type一样,但是会应用于最后一个同类型的子元素。

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

这将应用于innerDiv下的最后一个p段落元素。

1
2
3
4
5
6
7
8
9
<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() | 选择特定类型的子元素

这个选择器将从指定的父元素的孩子列表中选择某种类型的子元素。

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

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

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

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

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

1
2
3
4
5
6
7
8
9
<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>

innerDiv中最后一个段落子元素p(“Do the same”)将会被选中。

这个选择器应用于未被访问过的链接。常用于带有 href 属性的a锚元素。

1
2
3
4
5
a:link {
color: orangered;
}

<a href="/login">Login<a>

这将选中未被点击过带有href的指定界面的a锚点元素,选中的元素中的文字将会显示为橙色。

:checked | 选择一个选中的复选框

这个应用于已经被选中的复选框。

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

这个规则应用到所有被选中的复选框。

:valid | 选择一个通过验证的元素

这主要用于可视化表单元素,以让用户判断是否验证通过。验证通过时,默认元素带有valid属性。

1
2
3
input:valid {
boder-color: lightsalmon;
}

:invalid | 选择一个未通过验证的元素

像:valid一样,但是会应用到未通过验证的元素。

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

:lang() | 选择指定语言的元素

应用于指定了语言的元素。可以通过以下两种方式使用:

1
2
3
4
5
6
7
8
9
10
11
p:lang(fr) {
background: yellow;
}

或者

p[lang|="fr"] {
background: yellow;
}

<p lang="fr">Paragraph 1</p>

:not() | 对于选择取反(这是一个运算符)

否定伪类选择器选中相反的。让我们看一个示例:

1
2
3
4
5
6
7
8
9
10
11
.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 1和Div 2会被选中,因为他们不是p元素。

本文章摘录知乎,网址已经忘记了,感谢大佬的无私奉献

-------------本文结束感谢您的阅读-------------
没办法,总要恰饭的嘛~~