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选择器 > 类名选择器、伪类选择器、属性选择器  > 标签名选择器、伪元素选择器  > 全局选择器
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐