本文介绍了 CSS 中的选择器
基本选择器
*：通配符选择器#：id选择器.：类选择器element：元素选择器
属性选择器
[attribute]：匹配所有带attribute属性的元素[attribute="x"]：匹配所有attribute属性为x的元素[attribute~="x"]：匹配所有attribute属性具有多个空格分割的值，其中一个值等于x的元素[attribute|="x"]：匹配所有attribute属性具有连字符-分隔的值，其中一个值以 x 开头的元素
[attribute^="x"]：匹配所有attribute属性以x开头的值[attribute$="x"]：匹配所有attribute属性以x结尾的值[attribute*="x"]：匹配属性attribute属性的值包含x的元素
伪类选择器
E:first-child: 匹配元素 E 当它是其父元素的第一个子元素E:link: 匹配未被访问(未点击或跳转)的链接E:visited: 匹配已访问过的链接E:active: 匹配鼠标按下还未抬起的元素E:hover: 匹配鼠标悬停其上的元素E:focus: 匹配获取当前焦点的元素E:lang(x): 匹配lang属性等于 x 的元素
E:target: URL 后跟锚点#，指向文档内某个具体的元素，这个被链接的元素就是目标元素，E:target选 择器用于选取当前活动的目标元素 当我们点击列表 tab1 时，因为其锚点链接的元素就是 id 为 tab1 的元素，所以此时活动的目标元素就是 id 为 tab1 的 div，通过 div:target 就可以获取此目标元素。:not(selector): 匹配与 selector 选择器描述不相符的元素E:enabled: 匹配表单中激活的元素E:disabled: 匹配表单中禁用的元素E:checked: 匹配表单中被选中的 radio(单选框)或 checkbox(复选框)
CSS3结构性伪类
:root: 匹配根元素，对应 HTML 文档就是 html 元素E:nth-child(n): 匹配元素 E 当它是其父元素的第 n(从 1 开始)个子元素 列表 tab1 是其父元素 ul 的第一个元素，因此可以匹配到列表 tab1E:nth-last-child(n): 匹配元素 E 当它是其父元素的倒数第 n(从 1 开始)个子元素 列表 tab2 是其父元素 ul 的倒数第一个子元素，因此可以匹配到列表 tab2E:last-child: 匹配元素 E 当它是其父元素的倒数第 1 个子元素E:only-child: 匹配元素 E 当它是其父元素的唯一一个子元素E:nth-of-type(n): 匹配元素 E 当它是其父元素的第 n(从 1 开始)个出现的与 E 类型相同的子元素E:nth-last-of-type(n): 匹配元素 E 当它是其父元素的倒数第 n(从 1 开始)个出现的与 E 类型相同的子元素E:first-of-type: 匹配元素 E 当它是其父元素的第 1 个出现的与 E 类型相同的元素子元素(可能有多个)E:last-of-type: 匹配元素 E 当它是其父元素的倒数第 1 个出现的与 E 类型相同的元素子元素(可能有多个)E:only-of-type: 匹配元素 E 当它是其父元素下唯一一个 E 类型的元素E:empty: 匹配元素 E 当没有子元素或内容时
伪元素选择器
::first-line: 匹配元素的第一行::first-letter: 匹配元素的第一个字母::before: 在元素前通过 content 属性插入内容::after: 在元素后通过 content 属性插入内容::selection: 匹配鼠标框选的元素
多级选择器
E, F: 多元素选择器，同时匹配 E 元素和 F 元素E > F: 子元素选择器，匹配 E 元素的子元素 FE F: 后代元素选择器，匹配 E 元素的后代元素 FE + F: 相邻元素选择器，匹配所有紧随 E 元素之后的 F 元素 匹配 div3E ~ F: 同级元素选择器，匹配所有 E 元素之后的同级元素 F 匹配 div3，div4
优先级
!important > 行内样式 > ID > 类、伪类、属性 > 元素、伪元素 > 继承 > 通配符