css中的伪类选择器有哪些

1 伪类选择器

① 动态伪类选择器（5个）

:link        选择地址没有被访问过的超链接元素
:visited    选择地址被访问过的超链接元素
:hover      选择鼠标悬停在上面的元素。
:active     选择鼠标在上面并且按键按下不松手的元素
:focus      选择获取焦点的元素。

② 目标伪类选择器（1个）

:target      选择当前锚点指向的元素。

③ 语言伪类选择器 (1个，了解)

lang()       根据语言选择元素（lang 属性的值）

④ UI元素伪类选择器（3个）

:enabled 选择可以使用的表单控件（没有设置disabled 属性）
:disabled   选择不可以使用的表单控件（设置了disabled属性）
:checked    选择到被选中的单选按钮、复选框、下拉选项（option）

⑤ 结构伪类选择器（12个）

:root    选择到根元素
:empty  选择到既不能有文本内容也没有后代元素的元素:first-child           所有兄弟元素中的第一个
:last-child             所有兄弟元素中的最后一个
:nth-child(n)           所有兄弟元素中的第n个，n是个数字
:nth-last-child(n)      所有兄弟元素中的倒数第n个，n是个数字
:only-child             没有兄弟元素的元素:first-of-type         所有兄弟元素中同类型的第一个
:last-of-type           所有兄弟元素中同类型的最后一个
:nth-of-type(n)         所有兄弟元素中同类型的第n个,n是个数字
:nth-last-of-type(n)    所有兄弟元素中同类型的倒数第n个，n是数字
:only-of-type           没有同类型兄弟元素

⑥ 否定伪类选择器（1个）

:not(选择器)              排除满足小括号中选择器的元素

2 伪元素选择器（6个）

::first-letter       选择元素中第一字母
::first-line        选择元素中第一行
::after             给元素动态创建最后一个子元素
::before            给元素动态创建第一个子元素
::placeholder       用于设置输入框或文本域中placeholder属性设置的文字的样式
::selection         用于设置被鼠标选中的文字的样式

3 选择器的优先级（权重）

ID选择器 > 类名选择器、伪类选择器、属性选择器  > 标签名选择器、伪元素选择器  > 全局选择器

css中的伪类选择器有哪些相关推荐

【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
css 中的伪类选择器before 与after
.cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...
html伪类选择器代码,CSS3中结构性伪类选择器—:first-of-type实现名言标签（代码实例）...
本文目标: 1.掌握CSS中结构性伪类选择器-nth-child的用法问题: 1.实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器-first-of-type 附加说明: 1.整体宽为 ...
CSS :before :after 伪类选择器
CSS :before :after 伪类选择器所有主流浏览器都支持 :after 选择器. 注释:对于 IE8 及更早版本中的 :after,必须声明 <!DOCTYPE>. :bef ...
CSS中的伪类和伪元素（详细）
这篇想要跟大家分享的是css中的伪类和伪元素,有任何问题可以私聊我或者评论哦! 首先,我们先来想一下一.引入伪类跟伪元素的原因? 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述比如CSS ...
前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结锚伪类选择器:hover,:active,:visited;等用法总结一.什么是锚伪类在支持 CSS 的浏览器 ...
【第四篇】CSS选择器之伪类选择器
利用组合选择器虽然可以选择子类和兄弟元素,但是无法做到特殊的选择.例如无法选择第几个子类,或者和其同标签的兄弟元素.为此CSS诞生了伪类选择器,用来进行更加灵活的元素选择. 伪类选择器伪类选择器根据 ...
php中的伪类选择器,css伪类选择器介绍
伪类选择器: (推荐学习:css快速入门) 1.link.hover.active.visited a:link(未访问的链接状态),用于定义了常规的链接状态. a:hover(鼠标放在链接上的状态) ...
CSS UI状态伪类选择器
UI状态伪类选择器,用于选择处于某种状态下的UI元素,主要用于HTML表单上,根据表单元素的不同状态,定义不同的样式,来增强用户体验. 表单元素的状态包括获得焦点.失去焦点.选中.未选中.可用.不可用 ...

css中的伪类选择器有哪些

1 伪类选择器

① 动态伪类选择器（5个）

② 目标伪类选择器（1个）

③ 语言伪类选择器 (1个，了解)

④ UI元素伪类选择器（3个）

⑤ 结构伪类选择器（12个）

⑥ 否定伪类选择器（1个）

2 伪元素选择器（6个）

3 选择器的优先级（权重）

css中的伪类选择器有哪些相关推荐

最新文章

热门文章