选择器

选择器汇总

标志	选择器类型	作用	写法示例
*	通配选择器	选中所有标签，一般用于清除样式。	* { color: orange; font-size: 40px; }
	元素选择器	为某些元素统一设置样式	h1 { color: orange; font-size: 40px; } p { color: blue; font-size: 60px; }
.	类选择器	选中所有特定类名(class值)的元素	.speak { color: red; } .answer { color: blue; }
#	ID 选择器	选中特定id值的那个元素(唯一的)	#earthy { color: red; font-size: 60px; }
A B	后代选择器	选中指定元素中，符合要求的后代元素	ul li { color: red; } ul li a { color: orange; } .subject li { color: blue; } .subject li.front-end { color: blue; }
A > B	子代选择器	选中指定元素中，符合要求的子元素	div > a { color: red; } .persons > a { color: red; }
A + B	相邻兄弟选择器	选中指定元素后，符合条件的相邻兄弟元素	div + p { color: red; }
A ~ B	通用兄弟选择器	选中指定元素后，符合条件的所有兄弟元素	div ~ p { color: red; }

属性选择器

标志	选择器类型	作用	写法示例
[attr]	属性选择器	选中具有某个属性的元素	div[title] { color: red; }
[attr=value]	属性选择器	选中包含某个属性，且属性值等于指定值的元素	div[title="atguigu"] { color: red; }
[attr^=value]	属性选择器	选中包含某个属性，且属性值以指定的值开头的元素	div[title^="a"] { color: red; }
[attr$=value]	属性选择器	选中包含某个属性，且属性值以指定的值结尾的元素	div[title$="u"] { color: red; }
[attr*=value]	属性选择器	选中包含某个属性，属性值包含指定值的元素	div[title*="g"] { color: red; }

伪类选择器

标志	选择器类型	作用	写法示例
:link	伪类选择器	选中超链接未被访问的状态	a:link { color: blue; }
:visited	伪类选择器	选中超链接访问过的状态	a:visited { color: purple; }
:hover	伪类选择器	选中鼠标悬停的状态	a:hover { color: red; }
:active	伪类选择器	选中按下鼠标不松开的状态	a:active { color: yellow; }
:focus	伪类选择器	选中获取焦点的状态	input:focus { border: 2px solid blue; }
:first-child	伪类选择器	选中所有兄弟元素中的第一个	li:first-child { color: green; }
:last-child	伪类选择器	选中所有兄弟元素中的最后一个	li:last-child { color: green; }
:nth-child(n)	伪类选择器	选中所有兄弟元素中的第 n 个	li:nth-child(2) { color: green; }
:first-of-type	伪类选择器	选中所有同类型兄弟元素中的第一个	p:first-of-type { color: green; }
:last-of-type	伪类选择器	选中所有同类型兄弟元素中的最后一个	p:last-of-type { color: green; }
:nth-of-type(n)	伪类选择器	选中所有同类型兄弟元素中的第 n 个	p:nth-of-type(2) { color: green; }

顺序为：link > visited > hover > active