CSS-选择器

属性选择器

[id*=val] - id属性中包含val

[id^=val] - id属性以val开头

[id$=val] - id属性以val结尾

id选择器

#test - 选择id="test"的元素

类选择器

p.right - 带有right类的p元素

伪类选择器

a:link - 未访问的连接

a:visited - 已访问的连接

a:hover - 当鼠标悬停在上面的时候元素的样式

a:active - 选定的连接

input:focus - 拥有键盘输入的元素聚焦时的样式

p:first-line - p元素的第一行

p:first-letter - p元素第一个字

p:before - 在p元素前插入内容

p:after - 在p元素后插入内容

子类选择器

:first-child - 第一个子元素

:last-child - 最后一个子元素

:nth-child(n) - 指定序号的子元素

:nth-last-child(n) - 指定倒数序号的子元素

:nth-child(odd) - 序号为奇数的子元素

:nth-child(even) - 序号为偶数的子元素

h1:first-of-type - 父元素下第一个h1元素

h1:last-of-type - 父元素下最后一个h1元素

h1:nth-of-type(odd) - 序号为奇数的h1元素

h1:nth-last-of-type(odd) - 倒数序号为奇数的h1元素

div p - div元素中所有p元素

div > p - div元素的直接子元素中的p元素

兄弟选择器

div ~ p - 与div同级并且在div元素之后的p元素

div+p - 紧接在div元素之后的p元素

循环使用样式

:nth-child(an+b) - 循环使用样式

a - 每次循环样式的个数

b - 样式的序号

例如：

p:nth-child(2n+1) - 奇数
p:nth-child(2n+2) - 偶数

如果有4个样式：

p:nth-child(4n+1)

p:nth-child(4n+2)

p:nth-child(4n+3)

p:nth-child(4n+4)

状态伪类选择器

:hover - 鼠标悬停

:active - 鼠标按下还没有松开

:focus - 聚焦

:enabled - 可用

:disabled - 不可用

:read-only - 只读

:read-write - 读写

:checked - 选中（checkbox或者radio）

:default - 页面打开时默认选中的radio或者checkbox的样式，就算用户选择不选中元素也不会取消样式

:indeterminate - 页面打开时没有设定默认选择的radio的样式，用户选中其中一个，则样式取消

::selection - 元素选中状态的样式

---

特殊选择器

root选择器

:root - 文档根元素

not选择器

div :not(span) - 选择div元素中非span的元素

empty选择器

div :empty - 选择div元素中为空的元素

target选择器

p:target - 选择id属性为当前点击的超链接地址的元素

例如：

<a href="#p1" ></a>

<p id="p1"></p>

当点击超链接时p会采用p:target中的样式

only-child选择器

:only-child - 只有一个子元素的元素

等同于:nth-child(1):nth-last-child(1)