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'])
      

推荐阅读更多精彩内容

  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 5,910评论 0 61
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 584评论 0 3
  • 一、基本选择器 回顾选择器 通配符选择器、元素选择器、类选择器、ID选择器、后代选择器 新增基本选择器 子元素选择...
    越IT阅读 694评论 0 3
  • 选择器 元素选择符 关系选择符 属性选择符 伪类选择符 伪对象选择符 一、元素选择符 通配选择符 (*):选择所有...
    云外之境阅读 1,032评论 0 0
  • CSS选择器大致可以分成5类:基本选择器,层次选择器,属性选择器,伪类,伪元素。基本,层次,属性选择器比较容易理解...
    张歆琳阅读 1,578评论 4 26