伪类

117 阅读2分钟

1.动态伪类

:link 未访问的链接
:visited 已经访问的链接
:hover 鼠标停留时候链接
:active 激活链接时候
:focus 指当前拥有输入焦点的元素,因为a元素可以被tab键选中聚焦,所以focus也适用a元素。
如果不想元素被选中可以tabindex调整tab选中的顺序

 <a tabindex="-1" href="">案件</a>

使用注意: :hover必须放到:link和:visited后才能生效,:active必须放到:hover后才能生效。其中:hover,:active可以用在其他元素上

2.目标伪类

:target 用于a链接锚点,可修改锚点的样式

3.语言伪类

:lang,用于设置语言种类

4.元素伪类

给元素添加状态
:checkde
:enabled
:disabled

<button disabled>按钮</button>

按钮是不可选择状态,如果不设置则默认是enabled

5.结构伪类:

可以在前面加类名表示这个类的子元素,如有class名为z1,就可以设置z1的子元素伪类:
z1 :nth-child(1) ,z1 p:nth-of-type(2)

:nth-child,p:nth-child(1),:nth-last-child

:nth-child(1)表示父元素中的第一个子元素,1代表的数字就是第几个子元素。如:nth-child(2n)其中n表示为整数
p:nth-child(1)表示父元素中的第一个子元素且这个子元素要是p元素,如果第一个元素不是p元素则对应的样式不生效
:nth-last-child表示倒数,如:nth-last-child(1)就表示倒数第一个子元素

:nth-of-type()、:nth-last-of-type()

:nth-of-type(2)表示每个类型子元素的第二个变化 p:nth-of-type(1),type表示指定类型,此就指向子元素中的第一个p元素,不管父元素的第一个子元素是什么,只找p元素
p:nth-last-child(1)指向子元素中的倒数第一个p元素,p可以替换成其他元素,1表示的是第几个p元素

:first-child、:last-child、:first-of-type、: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)

:root、:only-child、:only-of-type、:empty

:root,根元素,也是html元素表示选中html元素
:only-child,是父元素中的唯一子元素
:only-of-type,是父元素中唯一这种类型的子元素
:empty,元素内容是空的如单纯的

<p></p>

6.否定伪类

:not

:not的格式是:not(x),x是一个简单的选择器,它可以是一个元素选择器,类选择器,属性选择器等(除否定伪类),但是他不支持组合。如:not(div,p)
body :not(div),表示body子元素中不是div的元素进行变化。