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