这些有用的CSS伪类通常被忽略
这些有用的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伪类通常被忽略的更多相关文章
- CSS伪类整理笔记
0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...
- CSS伪类使用详解
基本描述 CSS伪类是很常用的功能,主要应用于选择器的关键字,用来改变被选择元素的特殊状态下的样式. 伪类类似于普通CSS类的用法,是对CSS选择器的一种扩展,增强选择器的功能. 目前可用的伪类有大概 ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS 伪类
Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...
- CSS伪类
CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...
- 应用越来越广泛的css伪类
说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...
- (五)CSS伪类(Pseudo-class)
CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...
随机推荐
- SpringMVC基础源码分析(一)
实现Controller的三种方式分析 每种实现的方式对应的HanderAdapter都不同. 实现Controller接口 该接口对应的HanderAdapter为SimpleControllerH ...
- (五) Mysql 之锁详细篇
一.锁的分类1.范围:全局锁.表级锁.行级锁2.功能分类:共享锁.排它锁 二.数据库的全局锁 加锁:mysql> flush tables with read lock; 释放锁:mysql&g ...
- fields设计与测试
菲尔兹管理用例 一.向开发找到需求ID 需求设计文档ID 二.在fields的需求列表中,填入ID,创建计划 1.状态:测试接手 2.日期:冒烟日期,测试日期 3.可能遇到的问题: * 搜不到ID ...
- mysql 服务安装与配置
数据库服务下载与安装: 下载地址:MySQL Community Server 安装:跟随引导一路下一步,建议配置root密码,不然安装成功cmd验证却是要求密码.没有密码还需要执行命令重新设置密码, ...
- 类型提示和python函数中'->'的用法
一.类型提示 在python中,我们定义一个有参函数,调用该函数时需要传入参数,如下所示: # 定义一个简单的函数 def get_full_name(first_name, last_name): ...
- 运行springboot的时候访问本地图片地址的问题
@Configuration public class MyConfigrauration implements WebMvcConfigurer { /** * 当有请求经过[/myUpload/* ...
- 2022-05-26内部群每日三题-清辉PMP
1.在执行关键路径上的一项活动时,职能主管将涉及这个活动的两个项目资源调去支持解决某个应急情况,项目经理应该怎么做? A.实施应急计划 B.快速跟进关键路径 C.与职能经理协商分配替代资源 D.将该问 ...
- wget 和 curl的区别
原文 https://www.codenong.com/s1190000022301195/ https://geek-docs.com/linux/linux-ask-answer/differen ...
- less 4-7
LESS--4 先试一下单引号,发现没有效果,不报错,然后根据题目用双引号,报错. 根据报错的内容可以发现,参数ID是包括在一对双引号和括号之中的.和上一题类似,构造注入查询语句. ") a ...
- REPLACE,TRANSLATE
REPLACE 1.语法 replace(string,from_str,to_str) 2.说明: 针对string,将from_str中的字符替换为to_str中字符. 3.示例: /**说明:( ...