这些有用的CSS伪类通常被忽略

这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的JavaScript。

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

这个选择器用于选取指定选择器的首行。如有如下HTML

<body>
<h1>做工程师不做码农</h1>
<p>如果对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。
作者简介:Web前端工程师,全栈开发工程师、持续学习者。
私信回复:大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!</p>
</body>

css

p:first-line {
color: lightcoral;
}

效果

::first-letter 选择第一个字母

该伪选择器适用于元素中文本的第一个字母。有如下代码

<body>
<h1>做工程师不做码农</h1>
<p>我的网络ID叫Dunizb</p>
<p>zuo gong cheng shi bu zuo ma nong</p>
<p>My best friend is Mickey</p>
</body>
.innerDiv p:first-letter {
color: lightcoral;
font-size: 40px
}

效果

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

这个很好理解,就是平常我们鼠标选中文本时的样式。

使用 ::selection 伪类选择器,我们可以将样式应用于突出显示的区域。

div::selection {
color: yellow;
background: red;
}

上面的代码的效果就是:

:root 根元素

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

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

:empty 匹配空项目

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

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

该规则将适用于空的div元素。该规则将适用于第一个和第二个div,因为它们确实是空的,而不是第三个div,因为它有空格。

关于 :empty 的更多详细使用技巧,强烈推荐下面这篇文章

推荐阅读:拒绝JavaScript,这三个CSS技巧你一定用的上​

:only-child 选择唯一的子元素

选择器匹配属于其父元素的唯一子元素的每个元素。看如下HTML

<div>
<p>这是一个段落。</p>
</div>

<div>
<span>这是一个 span。</span>
<p>这是一个段落。</p>
</div>

<p><b>注释:</b>Internet Explorer 不支持 :only-child 选择器。</p>
p:only-child {
background:#ff0000;
}

效果如下

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

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

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

该选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。

n 可以是数字、关键词或公式。

<style>
p:nth-of-type(3n+0) {
background:#ff0000;
}
</style>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
</body>

:nth-last-of-type() 选择器相同,只是从最后一个子元素开始计数。

:link 选择一个未访问的超链接

此选择器适用于尚未访问的链接,这通常与带有 href 属性的 a 锚元素一起使用。

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

这将使所有具有href属性的锚元素(尚未单击以访问其href属性中的页面)具有橙色的文本。

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

如下所示,将匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。

input:checked {
border: 2px solid lightcoral;
}
<form action="">
<input type="radio" checked="checked" value="male" name="gender" /> 选中的单选框<br>
<input type="radio" value="female" name="gender" /> 单选框<br>
<input type="checkbox" checked="checked" value="Bike" /> 选中的复选框<br>
<input type="checkbox" value="Car" /> 复选框
</form>

该规则适用于所有已单击以选中它的复选框。

不过这个选择器兼容性太差,只有 Opera 支持。

: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">段落 1</p>

:not() 取反

一个否定伪选择器选择非的东西,让我们来看一个例子:

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

将选择 Div 1 和 Div 2,因为它们不是 p 元素。

 
转发

@杭州程序员小张

这些有用的CSS伪类通常被忽略

0/2000字

 

这些有用的CSS伪类通常被忽略的更多相关文章

  1. CSS伪类整理笔记

    0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...

  2. CSS伪类使用详解

    基本描述 CSS伪类是很常用的功能,主要应用于选择器的关键字,用来改变被选择元素的特殊状态下的样式. 伪类类似于普通CSS类的用法,是对CSS选择器的一种扩展,增强选择器的功能. 目前可用的伪类有大概 ...

  3. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  4. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  5. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  6. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  7. CSS 伪类

    Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...

  8. CSS伪类

    CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...

  9. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  10. (五)CSS伪类(Pseudo-class)

    CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...

随机推荐

  1. linux系统下,添加硬盘并挂载到操作系统的shell 脚本范例

    #!/bin/sh #新添加硬盘挂载到操作系统 pvcreate /dev/sdb   / / 一般新添加硬盘都是识别为sdb,当然,也不一定,要具体情况具体分析. vgcreate datavg / ...

  2. 周练7(ssti)

    {7*7} ->49 -> smarty {{7*'7'}} -> 49 -> twig {{7*'7'}} -> 7777777 -> jinjia2 1. [B ...

  3. 不可忽略的.gitignore_global

    会不会很奇怪,本地的代码运行没有问题,以为自己提交到远程仓库了 但是别人下载下来却没有,有没有可能是你根本没提交上去,对了,你真的有可能没提交上去 你本地这个文件是灰色的,确实没有提交上去,但是项目中 ...

  4. 人脸识别:face_recognition初尝试

    在学习face_recognition之前先看git上的另一个项目:face_collection .face_collection某种程度上可以看做是demo,便于我们更好的理解和使用face_re ...

  5. el-table多选框根据条件隐藏显示

    提供一个方法, 通过添加相应类来控制样式,设置 display: none ,达到隐藏 checkbox 的目的. 利用Table Attributes 属性里面的 cell-class-name 属 ...

  6. 蓝牙mesh组网实践(节点功能介绍)

    目录 未配网设备在配好网,被纳入网络后,可称之为节点. 蓝牙mesh网络中,节点可以有选择地支持四大功能--朋友.低功耗.转发.代理功能,可以复用多个功能(由于单片机硬件限制,ch582除了复用转发功 ...

  7. k8s 删除 node节点

    查看现有状态 [root@master ~]# kubectl get nodes NAME STATUS ROLES AGE VERSION master NotReady control-plan ...

  8. Centos 7 部署Kubernetes集群 (基于cri-dockerd)

    前言 基础描述 从 k8s 1.24开始,dockershim已经从kubelet中移除,但因为历史问题docker却不支持kubernetes主推的CRI(容器运行时接口)标准,所以docker不能 ...

  9. 【Java】取n工作日后的日期(仅排除周六周日)

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.time.*; import java. ...

  10. ubuntu18.04 安装 opencv(版本4.5.5) cmake(版本3.25)

    参考链接:安装cmake     https://blog.csdn.net/Man_1man/article/details/126467371   安装 opencv  https://blog. ...