基本选择器

选择器	说明	语法
通配符	作用范围为所有标签，用于页面整体样式	* { color: red }
元素	作用于同种标签，不能进行差异化样式设定	p { color: red }
类别	作用于我们自行设定的类别，是使用频率最高的选择器	.myClass { color: red }
ID	选取当前ID 相同的唯一元素	#myId { color: red }
属性选择器	用法多元，依属性进行筛选	[name="myElement"] { color: red }

复合选择器

选择器	说明	语法
交集	选取满足所有选择器的元素	選擇器1選擇器2...選擇器n { color: red }(不空格)
合并	选取满足任一选择器的元素	選擇器1, 選擇器2, ...選擇器n { color: red }(逗号分隔)
后代选择器	选取符合条件的后代元素	元素1 後代 後代的後代 ... 後代n { color: red }(空格分隔)
子选择器	选取符合条件的(直接)子元素	元素1>子代>子代的子代>...子代n { color: red }(> 号分隔)

伪类选择器

动态伪类

选择器	说明	搭配元素	语法
:link	未访问过的连结	只能用于 a 连结相关元素	a:link{ }
:visited	已访问过的连结	只能用于 a 连结相关元素	a:visited{ }
:hover	滑鼠悬在至元素上时	可用于所有元素	a:hover{ }
:active	点该击元素时	可用于所有元素	a:active{ }
:focus	该元素被focus 时	只能用于表单输入类元素	input:focus{ }

结构伪类

选择器	说明	补充
:root	代表根元素，也就是 标签。	几乎不会用到
:first-child	选择第一个子元素(不论是否为同类标签)
:last-child	选择最后一个子元素(不论是否为同类标签)	与 first-child 相反，从后数到前
:first-of-type	选择第一个同类子元素(同标签的第一个子元素)
:last-of-type	选择最后一个同类子元素(同标签的最后一个子元素)	与 first-of-type 相反，从后数到前
:nth-child(n)	选择第n 个子元素	n 中可以写数字、基偶数关键字、an+b 公式
:nth-last-child(n)	倒数第n 个子元素	与 nth-child 相反，从后数到前
:nth-of-type(n)	选择第n 个同类子元素
:nth-last-of-type(n)	倒数第n 个类子元素	与 nth-of-type 相反，从后数到前
:only-child	没有任何兄弟元素的子元素	独生子的概念

其他伪类

选择器	说明	补充
:checked	勾选状态的单多选框	有些预设样式不可修改，例如背景颜色
:disabled	禁用状态的元素
:enabled	可用状态的元素	较少用
:not(基本選擇器)	选取除了括号内选择器的元素	括号内只能放基本选择器，不可再嵌套一个not
:target	锚点的目标元素
:lang(語言)	选取lang 属性值相符的元素	必须搭配lang 属性使用

伪元素选择器

选择器	说明	补充
::first-letter	元素内容的第一个字元
::first-line	元素内容的第一行
::selection	滑鼠选中的内容
::placeholder	文字框提示文字
::before	于元素内容前新增一个元素	content 为必要属性
::after	于元素内容后新增一个元素	content 为必要属性