css伪类选择器

Date: 2018-02-12

选择器

n的起始值是1

• 第一个子节点：

:first-child{}

• 中间任意子节点：

:nth-child(n)

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

:nth-child(2n-1)

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

:nth-child(2n)

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

:nth-child(3n)

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

:nth-child(n+1)

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

:nth-child(3n+1)

• 最后一个子节点：

:last-chid{}

• 不是第一个子节点

&:not(:first-child){}

• 不是最后一个子节点

&:not(:last-child){}

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

:only-child{}

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

:empty{}

• 选择非*的元素

:not(p){}

• 选择首字母

:first-letter{}

• 选择首行

:first-line{}

• 在前面插入

:before{
  content: '***'
}

• 在后面插入

:after{
  content: '***'
}

链接

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

• 未访问的链接

a:link {color: #FF0000}

• 已访问的链接

a:visited {color: #00FF00}

• 鼠标移动到链接上

a:hover {color: #FF00FF}

• 选定的链接

a:active {color: #0000FF}

表单

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

:focus{}

• 可用的元素

:enabled{}

• 不可用的元素

:disabled{}

• 被选中的元素

:checked{}

• 只读的元素

:read-only{}

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

:read-write{}