全部伪类和使用

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值