伪类(pseudo-classes)

■常见的伪类有            

□动态伪类(dynamic pseudo-classes)              □结构伪类(structural pseudo-classes)

√:link、visited、:hover、:active、:focus          √:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()

□目标伪类(target pseudo-classes)             √:first-child、:last-child、:first-of-type、:

√:targei                                      last-of-type

                                             √:root、:only-child、:only-of-type、:last-

□语言伪类(language pseudo-classes)            of-type

√:lang()

                                              □否定伪类(negation pseudo-classes)   

□元素状态伪类(UI element states pseudo-classes)     √:ont()

√:enabled、 :disabled、:checked

动态伪类(dynamic pseudo-classes)

■使用举例

□a:link 未访问的链接

□a:visited 已访问的链接

□a:hover鼠标挪动到链接上

□:active 激活的链接(鼠标在链接上长按住未松开)

■使用注意

□:hover必须放在:link和:visited后面才能完全生效

□:active必须放在:hover后面才能完全生效

□所以建议编写顺序是:link、:bisited、:hover、:active

□记忆:女朋友看到lv后,ha ha 大笑

  • 除了a元素, :hover , :active也能用在其他元素上

动态伪类-:focus

  • :focus指当前拥有输入焦点的元素(能接收键盘 输入)
  • 文本输入框焦点,背景就会变红色

□因为链接a元素可以被键盘的tab键选中聚焦,所以:focus也适用于a元素

  • 动态伪类编写顺序建议为

□:link , :bisited , :focus , :hover , :active

□ 记忆: 女朋友看到lv包包后,(feng)疯一样地ha ha 大笑

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值