CSS选择器常见的五种类型

基本选择器

选择器	名称	备注
class	类选择器	类元素
id	id选择器	ID元素
*	通用元素选择器	任何元素
element	元素选择器	HTML元素

组合选择器

选择器	名称	备注
A,B	多元素选择器	同时匹配A元素或B元素
A B	后代选择器	匹配A元素所有的后代B元素
A>B	子元素选择器	匹配A元素的所有直接子元素
A+B	直接相邻选择器	匹配A元素之后的相邻的同级元素B
A~B	普通相邻选择器	匹配A元素之后的同级元素B

属性选择器

选择器	名称	备注
[attribute]	[target]	选择所有带有target属性元素
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素
[attribute ^= language]	[lang ^= en]	选择一个lang属性的起始值="EN"的所有元素
[attribute $= language]	[lang $= en]	选择一个lang属性的结尾值="EN"的所有元素
[attribute *= language]	[lang *= en]	选择一个lang属性的包含"EN"的所有元素

伪类选择器

选择器	名称	备注
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:hover	a:hover	把鼠标放在链接上的状态
:active	a:active	选择正在活动链接
:focus	input:focus	选择元素输入后具有焦点

伪元素选择器

选择器	名称	备注
::before/:before	在被选元素前插入内容。	需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。
::after/:after	在选被元素后插入内容	其用法和特性与:before相似。
::first-letter/:first-letter	匹配元素中文本的首字母。	被修饰的首字母不在文档树中。
::first-line/:first-line	匹配元素中第一行的文本。	这个伪元素只能用在块元素中，不能用在内联元素中。