CSS选择符伪类总结

1、结构性伪类选择器 :

通过第几个进行查找

    h2:first-child {  }   选中 h2所在 整个 集合里面 第一个h2
    h2:last-child {  }    选中 h2所在 整个 集合里面 最后一个h2
    h2:nth-child(第几个){}   通过第几个进行查找 (第几个)   even  odd  2n 2n + 1
    h2:nth-last-child(倒数第几个){ }
    h2:only-child {  }   当前集合里面只有一个h2才会被选中



    h2:first-of-type {  }   选中 h2所在 整个 集合里面 第一个h2
    h2:last-of-type {  }    选中 h2所在 整个 集合里面 最后一个h2
    h2:nth-of-type(第几个){}   通过第几个进行查找 (第几个)   even  odd  2n 2n + 1
    h2:nth-last-of-type(倒数第几个){ }
    h2:only-of-type {  }   当前集合里面只有一个h2才会被选中


    总结: 分析:当前同级元素是否为一类,如果非一类的情况下 选用of-type


补充:
    :root{}  选中的是根元素
    选择符:empty{}  当一个元素没有任何内容或者任何子元素的时候被选中

2:目标伪类:

    :target

3、UI元素状态伪类:

:enabled          表单元素可用的时候执行的样式
:disabled        表单元素禁用的时候执行的样式
:checked          表单选中(单选 多选按钮选中的时候)
::selection       文本选中的时候的样式.

4、动态伪类:

E**:link**
    链接伪类选择器  
    选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E**:visited**  
    链接伪类选择器
    选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E**:active**
    用户行为选择器
    选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上
E:**hover**
    用户行为选择器
    选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover


E:**focus**
    用户行为选择器
    选择匹配的E元素,而且匹配元素获取焦点
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值