CSS伪类选择器总结

CSS伪类选择器总结

  • 动态伪类选择器
    • :link, 链接伪类选择器,超链接未被访问前
    • :visited, 链接伪类选择器,超链接已被访问
    • :active, 用户行为伪类选择器, 匹配元素被激活状态,比如链接、按钮
    • :hover,用户行为伪类选择器,鼠标停留在元素上时的样式
    • :focus, 用户行为伪类选择器,匹配元素获得焦点
  • 目标伪类选择器
    • :target, 匹配的元素被相关url指向
  • 语言伪类选择器
    • :lang(en)
  • UI状态伪类选择器
    • :checked
    • :enabled
    • :disabled
  • 结构伪类选择器
    • :first-child

      li:first-child /*也就是找到li元素,并且这个li元素是父元素的第一个元素*/
      
    • :last-child

      li:last-child /*找到li元素,并且这个li元素是其父元素的最后一个元素*/
      
    • :root

      li:root /*匹配li元素所在文档的根元素。一般也就是html*/
      
    • :nth-child(n)

      li:nth-child(4) 
      /*找到li元素,并且这个li元素是其父元素的第4个元素,n是从1开始算的,*/
      /*n也可以是公式,比如2n+1,也可以是关键字:odd、even*/
      
    • :nth-last-child(n)

      li:nth-last-child(4) 
      /*找到li元素,并且这个li元素是其父元素的倒数第四个元素,如果n为1,那就是最后一个元素*/
      
    • :nth-of-type(n)

      li:nth-of-type(2)
      /*找到li元素,并且这个li元素是其父元素的第2个li*/
      
    • :nth-last-of-type(n)

    • :first-of-type

    • :last-of-type

    • :only-child

      li:only-child /*找到li元素,并且这个li的父元素只有一个li元素*/
      
    • :only-of-type

      li:only-of-type
      /*找到li元素,并且li元素的父元素只包含li元素*/
      
    • :empty

      li:empty /*找到li元素,并且该li元素没有子节点*/
      
  • 否伪类选择器
    • :not()

      input:not([type='text'])
      
    原文作者:亲爱的孟良
    原文地址: https://www.jianshu.com/p/1ae99144c2c9
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞