发布时间:2024-11-23 10:01
什么是伪类
伪类
;选择器的一种
,它用于选择处于特定状态的元素;比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;
常见的伪类有
所有的伪类: https://developer.mozilla.org/zhCN/docs/Web/CSS/Pseudo-classes
使用举例
orange
的颜色;red
的颜色;green
的颜色;blue
的颜色;除了a元素,:hover、:active也能用在其他元素上
:focus指当前拥有输入焦点的元素(能接收键盘输入)
动态伪类编写顺序建议为 :link、:visited、:focus、:hover、:active
直接给a元素设置样式,相当于给a元素的所有动态伪类都设置了
:target
:lang( )
:enabled、:disabled、:checked
:nth-child(1)
第1个子元素
;:nth-child(2n)
正整数和0
;:nth-child(2n + 1)
正整数和0
;nth-child(-n + 2)
前2个子元素
;:nth-last-child()的语法跟:nth-child()类似,不同点是:nth-last-child()从最后一个子元素开始往前计数
:nth-last-child(1)
,代表倒数第一个子元素;:nth-last-child(-n + 2)
,代表最后2个子元素;:nth-of-type()用法跟:nth-child()类似
:nth-of-type()
计数时只计算同种类型的元素;:nth-last-of-type()用法跟:nth-of-type()类似
:nth-last-of-type()
从最后一个这种类型的子元素开始往前计数;:first-child
:等同于:nth-child(1)
:last-child
:等同于:nth-last-child(1)
:first-of-type
:等同于:nth-of-type(1)
:last-of-type
:等同于:nth-last-of-type(1)
:only-child
:是父元素中唯一的子元素
:only-of-type
:是父元素中唯一的这种类型的子元素
:root
:根元素,就是HTML元素
:empty
:代表里面完全空白的元素
:not()的格式是:not(x)
简单选择器
:not(x)表示除x以外的元素