CSS3：选择器

CSS选择器的作用是找出某类元素，以便我们使用style元素或者外部样式表对这类元素设置样式。

基本选择器

选择器	含义	演示样例	描写叙述
*	选择全部元素	* { border: thin black solid; padding: 4px }	选择全部元素
<元素类型>	选取一个文档中该元素的全部实例	a { border: thin black solid; padding: 4px }	选择a元素
.<类名>（或 *.<类名>）	指定全局属性class为指定类的元素	.class2 { border: thin black solid; padding: 4px }	选中指定class2的全部类型的元素
<元素类型>.<类名>	指定全局属性class为指定类的特定元素	span.class2 { border: thin black solid; padding: 4px }	选中指定class2的span元素
<元素类型>.<类名1>.<类名2>	指定全局属性class指定了多个类的元素，即同一时候指定类名1和类名2的元素	span.class1.class2 { border: thin black solid; padding: 4px }	选中同一时候指定class1和class2的sapn元素
#<id>	依据全局属性id的值选择元素	#w3canchor { border: thin black solid; padding: 4px }	选中id为w3canchor的元素
<元素类型>.#<id>	依据指定元素类型的id值选择元素	span.#w3canchor { border: thin black solid; padding: 4px }	选中id为w3canchor的span元素
[<条件>]或<元素类型>[<条件>]	匹配具有指定条件的属性的元素	[href] { border: thin black solid; padding: 4px }	匹配全部具有href属性的元素。见“元素属性选择器的条件”

元素属性选择器的条件：

1）[attr]：选择定义attr属性的元素，忽略属性值。
2）[attr="val"]：选择定义attr属性，且属性值为val的元素；
3）[attr^="val"]：选择定义attr属性。且属性值以字符串val大头的元素；
4）[attr$="val"]：选择定义attr属性。且属性值以字符串val结尾的元素。
5）[attr*="val"]：选择定义attr属性，且属性值包括字符串val的元素；
6）[attr~="val"]：选择定义attr属性。且属性值具有多个值，当中一个为val的元素；
7）[attr|="val"]：选择定义attr属性。且属性值为连字符切割的多个值，当中第一个为字符串val的元素。

复合选择器

选择器	含义	演示样例	描写叙述
<选择器1>,<选择器2>,<选择器3>	选择器1、选择器2和选择器3匹配的全部元素的并集	a,[lang|="en"] { border: thin black solid; padding: 4px }	选中a元素和具有属性lang，且属性值第一个为en的元素
<选择器1> <选择器2>	匹配选择器1的元素的后代元素中匹配选择器2的元素	p span { border: thin black solid; padding: 4px }	匹配p元素的后代span元素
<选择器1> > <选择器2>	匹配选择器1的元素的直接后代元素（子元素）中匹配选择器2的元素	body > * > span, tr > th { border: thin black solid; padding: 4px }	匹配body元素的随意子元素的span子元素，在匹配tr元素的th子元素
<选择器1> + <选择器2>	匹配选择器1的元素的兴许相邻的兄弟元素中匹配选择器2的元素	p + a { border: thin black solid; padding: 4px }	匹配紧跟在p元素之后的a元素
<选择器1> ~ <选择器2>	匹配选择器1的元素的兴许兄弟元素中匹配选择器2的元素	p ~ a { border: thin black solid; padding: 4px }	匹配p元素之后的a元素

伪元素选择器

选择器	含义	演示样例	说明
::first-line	文本内容的首行	::first-line { border: thin black solid; padding: 4px } p::first-line { border: thin black solid; padding: 4px }	匹配p元素的文本的首行
::first-letter	文本内容的首字母	::first-letter { border: thin black solid; padding: 4px }	匹配全部文本的首字母
:before :after	在选中元素的内容之前插入内容 在选中元素的内容之后插入内容	a:before { content: "Click here to " } a:after { content: "!" }	分别在a元素的之前和之后插入内容

结构性伪类选择器

选择器	含义	演示样例	说明
:root	选择文档中的根元素。总是返回html	:root { border: thin black solid; padding: 4px }
:first-child	父元素的第一个子元素	p > span:first-child { border: thin black solid; padding: 4px }	匹配p元素的第一个span子元素
:last-child	父元素的最后一个子元素	:last-child { border: thin black solid; padding: 4px }	匹配全部最后的子元素
:only-child	匹配父元素包括的唯一子元素	:only-child { border: thin black solid; padding: 4px }	匹配仅有一个子元素的元素
:only-of-type	匹配父元素仅有一种类型子元素的全部子元素	:only-of-type { border: thin black solid; padding: 4px }

使用nth-child选择器

:nth-child(n)：选择父元素的第n个子元素
:nth-last-child(n)：选择父元素的倒数第n个子元素
:nth-of-type(n)：选择父元素定义类型的第n个子元素
:nth-last-of-type(n)：选择父元素定义类型的倒数第n个子元素

UI伪类选择器

选择器	含义	演示样例	说明
:enabled和:disabled	选择启用或禁用的元素，该选择器不会匹配没有禁用状态的元素	:enabled { border: thin black solid; padding: 4px }	匹配启用的全部元素
:checked	选择由checked属性或用户勾选的单选button或者复选框	:checked + span { background-color: red; color: white; padding: 5px; border: medium black solid; }	匹配勾选的元素后直接相邻的span元素
:default	选择一组相似元素中的默认元素。比如：提交button总是表单的默认button	:default { outline: medium solid red; }
:value和:invalid	分别匹配符合和不符合它们的输入验证要求的input元素	:invalid { outline: medium solid red; } :valid { outline: medium solid green; }
:in-range :out-of-range	匹配位于指定范围内的input元素 匹配位于指定范围之外的input元素	:in-range { outline: medium solid green; } :out-of-range { outline: medium solid red; }	注意：仅部分浏览器支持
:required :optional	匹配具有required属性的input元素 匹配没有required属性的input元素	:required { outline: medium solid red; } :optional { outline: medium solid green; }

动态伪类选择器

选择器	含义	演示样例	说明
:link :visited	择链接元素 选择用户已訪问的链接元素	:link { border: thin black solid; background-color: lightgrey; padding: 4px; color: red; } :visited { background-color: grey; color: white; }
:hover	鼠标悬停在其上的元素	button:hover { border: thin black solid; padding: 4px }	匹配鼠标悬停在其上的button元素
:active	当前被用户激活的元素，通常意味着用户即将点击该元素	:active { border: thin black solid; padding: 4px }
:focus	当前获得焦点的元素	input:focus { border: thin black solid; padding: 4px }	选择获取焦点的input元素

其他伪类选择器

选择器	含义	演示样例	说明
:not(<选择器>)	对括号内选择器的选择取反	a:not([href*="apress"]) { border: thin black solid; padding: 4px }	匹配href属性没有包括字符串apress的a元素
:empty	没有子元素的元素
:lang(<目标语言>)	选择基于lang全局属性值的元素	:lang(en) { border: thin black solid; padding: 4px }	匹配具有lang属性，且内容採用英文表达的元素
:target	URL片段标识符指向的元素	:target { border: thin black solid; padding: 4px; color: red; }