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的元素进行变化。