HTML5权威指南——CSS选择器(2)

结构性伪类选择器

所谓的结构性伪类选择器就是根据元素在文档中出现的位置来选择元素。这些选择器既可以单独使用也可以搭配使用

  • 根元素选择器 :root返回文档的根元素,返回的就是html元素
  • 子元素选择器如下:
选择器说明
:first-child选择元素的第一个子元素
:last-child选择元素的最后一个子元素
:only-child选择元素的唯一子元素
:only-of-type选择元素指定类型的唯一子元素
  • :nth-child选择器与子元素选择器类似,不同的地方在于这类选择器可以指定索引匹配特定位置的元素
选择器说明
:nth-child(n)选择父元素的第n个子元素
:nth-last-child(n)选择父元素的倒数第n个子元素
:nth-of-type(n)选择父元素定义类型的第n个子元素
:nth-last-of-type(n)选择父元素定义类型的倒数第n个子元素

使用UI伪类选择器

选择器说明
:enabled选择启用状态的元素
:disabled选择禁用装态的元素
:checked选择被选中的input元素
:default选择默认元素
:valid 和 :invalid根据输入验证选择有效或者无效的元素
:in-range和 out-of-range选择指定范围之内或者之外受限的input元素
:required 和:optional根据是否允许:required属性选择input元素

使用到动态伪类选择器

  • :link选择链接元素
  • :visited选择用户已访问的链接元素
  • :hover选择用户鼠标悬停在其上的任意元素
  • :active选择当前被用户激活的元素,值域激活的诠释就要看浏览器了,大多数是鼠标点击的情况下 使用这个选择器
  • :focus匹配当前获得焦点的元素

其他伪类选择器

  • :not(选择器)对任意选择取反
  • :empty选择没有定义子元素的元素
  • :lang(目标语言)选择器匹配基于lang全局属性值的元素
  • :target选择器匹配URL标识符指向的元素,我认为这个功能就好像你点击目录中的一项,然后跳转当相应的位置,此时target选择器应用的样式就是跳转到的这个元素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值