属性选择器
存否和值选择器
这些选择器允许基于一个元素自身是否存在（例如 href）或者基于各式不同的按属性值的匹配，来选取元素。
| 选择器 | 示例 | 描述 |
|---|---|---|
| [attr ] | a[title] | 匹配带有一个名为 attr 的属性的元素——方括号里的值。 |
| [attr =value ] | a[href="https://example.com"] | 匹配带有一个名为 attr 的属性的元素，其值正为 value ——引号中的字符串。 |
| [attr ~=value ] | p[class~="special"] | 匹配带有一个名为 attr 的属性的元素 ，其值正为 value ，或者匹配带有一个 attr 属性的元素，其值有一个或者更多，至少有一个和 value 匹配。注意，在一列中的好几个值，是用空格隔开的。 |
| [attr | =value ] | div[lang |
示例链接:https://mdn.github.io/css-examples/learn/selectors/attribute.html
子字符串匹配选择器
这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有 box-warning 和 box-error 类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用[class^="box-"]来把它们两个都选中。
| 选择器 | 示例 | 描述 |
|---|---|---|
| [attr ^=value ] | li[class^="box-"] | 匹配带有一个名为 attr 的属性的元素，其值开头为 value 子字符串。 |
| [attr $=value ] | li[class$="-box"] | 匹配带有一个名为 attr 的属性的元素，其值结尾为 value 子字符串 |
| [attr *=value ] | li[class*="box"] | 匹配带有一个名为 attr 的属性的元素，其值的字符串中的任何地方，至少出现了一次 value 子字符串。 |
下个示例展示了这些选择器的用法：
- li[class^="a"]匹配了任何值开头为 a 的属性，于是匹配了前两项。
- li[class$="a"]匹配了任何值结尾为 a 的属性，于是匹配了第一和第三项。
- li[class*="a"]匹配了任何值的字符串中出现了 a 的属性，于是匹配了所有项。
示例链接:https://mdn.github.io/css-examples/learn/selectors/attribute-substring.html
伪类选择器
| 选择器 | 描述 |
|---|---|
| :active | 在用户激活（例如点击）元素的时候匹配。 |
| :any-link | 匹配一个链接的:link 和:visited 状态。 |
| :blank | 匹配空输入 |
| :checked | 匹配处于选中状态的单选或者复选框。 |
| :current(en-US) | 匹配正在展示的元素，或者其上级元素。 |
| :default | 匹配一组相似的元素中默认的一个或者更多的 UI 元素。 |
| :dir | 基于其方向性（HTMLdir 属性或者 CSSdirection 属性的值）匹配一个元素。 |
| :disabled | 匹配处于关闭状态的用户界面元素 |
| :empty | 匹配除了可能存在的空格外，没有子元素的元素。 |
| :enabled | 匹配处于开启状态的用户界面元素。 |
| :first | 匹配分页媒体的第一页。 |
| :first-child | 匹配兄弟元素中的第一个元素。 |
| :first-of-type | 匹配兄弟元素中第一个某种类型的元素。 |
| :focus | 当一个元素有焦点的时候匹配。 |
| :focus-visible | 当元素有焦点，且焦点对用户可见的时候匹配。 |
| :focus-within | 匹配有焦点的元素，以及子代元素有焦点的元素。 |
| :future(en-US) | 匹配当前元素之后的元素。 |
| :hover | 当用户悬浮到一个元素之上的时候匹配。 |
| :indeterminate | 匹配未定态值的 UI 元素，通常为复选框。 |
| :in-range | 用一个区间匹配元素，当值处于区间之内时匹配。 |
| :invalid | 匹配诸如的位于不可用状态的元素。 |
| :lang | 基于语言（HTMLlang 属性的值）匹配元素。 |
| :last-child | 匹配兄弟元素中最末的那个元素。 |
| :last-of-type | 匹配兄弟元素中最后一个某种类型的元素。 |
| :left | 在分页媒体 (en-US)中，匹配左手边的页。 |
| :link | 匹配未曾访问的链接。 |
| :local-link(en-US) | 匹配指向和当前文档同一网站页面的链接。 |
| :is() | 匹配传入的选择器列表中的任何选择器。 |
| :not | 匹配作为值传入自身的选择器未匹配的物件。 |
| :nth-child | 匹配一列兄弟元素中的元素——兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。 |
| :nth-of-type | 匹配某种类型的一列兄弟元素（比如， 元素）——兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。 |
| :nth-last-child | 匹配一列兄弟元素，从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 |
| :nth-last-of-type | 匹配某种类型的一列兄弟元素（比如， 元素），从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 |
| :only-child | 匹配没有兄弟元素的元素。 |
| :only-of-type | 匹配兄弟元素中某类型仅有的元素。 |
| :optional | 匹配不是必填的 form 元素。 |
| :out-of-range | 按区间匹配元素，当值不在区间内的的时候匹配。 |
| :past(en-US) | 匹配当前元素之前的元素。 |
| :placeholder-shown | 匹配显示占位文字的 input 元素。 |
| :playing(en-US) | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。 |
| :paused(en-US) | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。 |
| :read-only | 匹配用户不可更改的元素。 |
| :read-write | 匹配用户可更改的元素。 |
| :required | 匹配必填的 form 元素。 |
| :right | 在分页媒体 (en-US)中，匹配右手边的页。 |
| :root | 匹配文档的根元素。 |
| :scope | 匹配任何为参考点元素的的元素。 |
| :valid | 匹配诸如元素的处于可用状态的元素。 |
| :target | 匹配当前 URL 目标的元素（例如如果它有一个匹配当前 URL 分段的元素）。 |
| :visited | 匹配已访问链接。 |
伪元素
| 选择器 | 描述 |
|---|---|
| ::after | 匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
| ::before | 匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
| ::first-letter | 匹配元素的第一个字母。 |
| ::first-line | 匹配包含此伪元素的元素的第一行。 |
| ::grammar-error | 匹配文档中包含了浏览器标记的语法错误的那部分。 |
| ::selection | 匹配文档中被选择的那部分。 |
| ::spelling-error | 匹配文档中包含了浏览器标记的拼写错误的那部分。 |
关系选择器
后代选择器
后代选择器——典型用单个空格（ ）字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。
body article p
子代关系选择器
子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为 元素： 如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。要选中所有的 元素后任何地方 的 示例链接:https://mdn.github.io/css-examples/learn/selectors/general.htmlarticle > p
通用兄弟
元素，我们会这样做：
p ~ img