16个非常有用的CSS伪选择器

时间: 2020-09-01阅读: 238标签: 伪类

这篇文章鼓励构造 UI 时使用更多纯 css 和更少的 js。熟悉所有的 css 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码


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

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

p:first-line {
    color: lightcoral;
}

2、::first-letter | 选择首字母

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

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


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

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

div::selection {
    background: yellow;
}


4、:root | 根元素

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


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

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

div:empty {
    border: 2px solid orange;
}

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

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


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

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

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


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

.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>

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


8、: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”)将被选中。


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

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

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


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

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

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

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

<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”)将会被选中。


11、:link | 选择一个未访问过的超链接

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

a:link {
    color: orangered;
}

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

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


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

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

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

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


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

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

input:valid {
    boder-color: lightsalmon;
}


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

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

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


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

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

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

或者

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

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


16、: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 1和Div 2会被选中,因为他们不是p元素。


结论

就这些了。这是全部内容。还有更多的伪选择器,但是为非标准的,因此我省略了它们。感谢阅读,如果你觉得很棒,请给我点个赞,谢谢!!

原作者姓名: niayyy
原文链接:https://juejin.im/post/6844904147435651079


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9626

关闭

如何使用JS操纵伪元素

获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。 更换class来实现伪元素属性值的更改、使用CSSStyleSheet的insertRule来为伪元素修改样式、

css中:visited怎么不起作用?

css定义超链接四个状态也是有顺序的,对于这4个伪类的设置,有一点需要特别注意,那就是它们的先后顺序,要让它们遵守一个顺序原则,也就是link ~ visited ~ hover ~ active 。

css链接link_CSS :link 伪类

链接可以使用任何css属性,包括字体、颜色、背景等等、链接有四个状态,可在四个状态时设置不同的属性,当为链接的不同状态设置样式时,需要遵循a:hover 必须位于a:link 和a:visited之后,a:active 必须位于 a:hover 之后

深入理解CSS伪类

伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识

css获取除第一个之外的子元素

有时候我们需要用CSS选择非第一个子元素,例如下面这样的HTML,希望让两个span之间间隔一定的距离,但又不希望简单的给每个span设置margin-right(会导致最后一个span也有margin-right,可能影响之后元素的排版)。

html中a标签的4个伪类样式

在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve,之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时候却发现并不起作用了

css否定伪类:not(s)

:not(X)是CSS中的一个否定伪类(选择器),并且接受一个简单的选择器作为参数。本质上,可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。

css的伪类有哪些?

同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。CSS 伪类用于向某些选择器添加特殊的效果。

css中:focus伪类的使用

当元素获取到焦点之后,若该元素是一个有效的链接,则通过“Enter”键即可进入该链接地址;在页面中也可以通过\\\"Tab\\\"键,遍历所有的可获得焦点的元素,使其获得焦点;

css选择器优先级高低排列_css样式权重计算和!important属性

css的选择器是有权重(即优先级)的,在不同选择器的样式出现冲突时候,会采用权重高的选择器设置样式,而优先级不仅仅只是:“行间>内部>外部、ID>class>元素”。css优先级到底是怎么计算的呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!