CSS选择器

基本选择器

选择器	语法
类型选择器2	elename
类选择器	.classname
ID选择器	#idname
通用选择器	*
属性选择器	[attr] 选择存在attr属性的元素 [attr=value]选择attr属性为value的元素 [attr~=value]选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素 [attr*=value]选择attr属性的值中包含字符串val的元素 [attr^=value]选择attr属性的值以val开头（包括val）的元素 [attr$=value]选择attr属性的值以val结尾（包括val）的元素 [attr|=value]选择attr属性的值以val或val-开头的元素

关系选择器

选择器	语法	解释
相邻兄弟选择器	A+B	匹配紧跟其A元素的兄弟元素B
一般兄弟选择器	A~B	匹配A元素后的兄弟元素中的B元素
子选择器	A>B	匹配A元素的子元素中的B元素
后代选择器	A B	匹配A元素的后代元素中的B元素

伪类选择器

伪类以一个冒号为前缀，表示了在某种状态下的指定元素。

选择器	解释
:focus	当元素获得焦点时选中
:link	应用于URL尚未访问的链接
:hover	应用于处于“悬停状态”的元素
:active	应用于处于激活状态的元素
:visited	应用于URL访问过的链接
:first-child	元素作为第一个子元素时被选中
:first-of-type	元素作为同类型的第一个子元素时被选中
:last-child	元素作为最后一个子元素时被选中
:last-of-type	元素作为同类型的最后一个子元素时被选中
:not(X)	匹配不符合参数选择器X描述的元素,X为简单的选择器
:nth-child(an+b)	匹配在兄弟节点中的位置与模式 an+b 匹配的元素
:nth-of-type(an+b)	匹配那些在它之前有 an+b-1 个相同类型兄弟节点的元素
:nth-last-child(an+b)	和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处
:nth-last-of-type(an+b)	和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处
:only-child	作为父元素的唯一一个子元素被选中
:only-of-type	没有同类型的兄弟元素时被选中

伪元素选择器

伪元素以两个冒号为前缀，代表的是指定元素的某个部分。实际上在DOM树中并不存在。

选择器	解释
::after	创建一个伪元素，做为已选中元素的最后一个子元素
::before	创建一个伪元素，做为已选中元素的第一个子元素
::first-line	块级元素的第一行
::first-letter	某块级元素第一行的第一个字母(文字所处的行之前没有其他内容)
::section	文档中被选中的部分