css伪类选择器

发表于 | 更新于 | 阅读次数 1
css伪类选择器

选择器

n的起始值是1

  • 第一个子节点：

    1
    :first-child{}

  • 中间任意子节点：

    1
    :nth-child(n)

  • 奇数（1、3、5…）序号的子节点

    1
    :nth-child(2n-1)

  • 偶数（2、4、6…）序号的子节点

    1
    :nth-child(2n)

  • 第3、6、9…个子节点：

    1
    :nth-child(3n)

  • 中间第2个子节点开始：

    1
    :nth-child(n+1)

  • 第4、7、10…个子节点：

    1
    :nth-child(3n+1)

  • 最后一个子节点：

    1
    :last-chid{}

  • 不是第一个子节点

    1
    &:not(:first-child){}

  • 不是最后一个子节点

    1
    &:not(:last-child){}

  • 匹配父元素只有一个子节点的元素（设置在子节点上）

    1
    :only-child{}

  • 选择空元素（包括没有子节点和文本节点）的节点

    1
    :empty{}

  • 选择非*的元素

    1
    :not(p){}

  • 选择首字母

    1
    :first-letter{}

  • 选择首行

    1
    :first-line{}

  • 在前面插入

    1
    2
    3
    :before{
      content: '***'
    }

  • 在后面插入

    1
    2
    3
    :after{
      content: '***'
    }

链接

按照L-V-H-A的顺序设置

  • 未访问的链接

    1
    a:link {color: #FF0000}

  • 已访问的链接

    1
    a:visited {color: #00FF00}

  • 鼠标移动到链接上

    1
    a:hover {color: #FF00FF}

  • 选定的链接

    1
    a:active {color: #0000FF}

表单

  • 获取获得焦点的元素（链接、输入框等）

    1
    :focus{}

  • 可用的元素

    1
    :enabled{}

  • 不可用的元素

    1
    :disabled{}

  • 被选中的元素

    1
    :checked{}

  • 只读的元素

    1
    :read-only{}

  • 非只读（可读可写）的元素

    1
    :read-write{}