# Heading
# 常用选择器
| 选择器名称 | 选择的内容 | 示例 |
|---|---|---|
| 元素选择器（也称作标签或类型选择器） | 所有指定(该)类型的 HTML 元素 | p 选择 <p> |
| ID 选择器 | 具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID） | #my-id选择 <p id="my-id"> 或 <a id="my-id"> |
| 类选择器 | 具有特定类的元素（单一页面中，一个类可以有多个实例） | .my-class选择 <p class="my-class"> 和 <a class="my-class"> |
| 属性选择器 | 拥有特定属性的元素 | img[src]选择 <img src="myimage.png"> 而不是 <img>或者选择 特定属性 a[href="https://example.com"] |
| 伪（Pseudo）类选择器 | 特定状态下的特定元素（比如鼠标指针悬停） | a:hover鼠标指针悬停:focus 只会在用户使用键盘控制，选定元素的时候激活:active @TODO:first-child 父元素的第一个子元素:last-child 父元素的最后一个子元素:only-child 没有任何兄弟元素的元素:invalid 任意内容未通过验证的 <input> 或其他 <form> 元素 |
| 伪元素选择器（附加至选择器末的关键词） | 被选择元素的特定部分修改样式 | p::first-line 选择一个元素中的第一行::first-letter 块级元素第一行的第一个字母::before ::after ``与content属性一同使用，使用CSS将内容插入到你的文档中 |
| 通配选择器 | 星号(*) 它可以匹配任意类型的HTML元素 在CSS3中,星号 (*)可以和命名空间组合使用 | ns|* - 会匹配ns命名空间下的所有元素*|* - 会匹配所有命名空间下的所有元素|* - 会匹配所有没有命名空间的元素 |
| 后代选择器 | 用单个空格(或多个)组合两个选择器 | body article p .box p |
| 子代选择器 | 使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素 | div > span 选择div的初代子元素spanul > li 选择ul的初代子元素li |
| 相邻兄弟选择器 | 当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中（两个元素之间不能插入其他元素） | img + pimg后面紧跟着的段落li:first-of-type + li 第二个li |
| 通用兄弟选择器 | 兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素 | p ~ img 选择p之后同级的所有img |
| 运算符 | 可以将其他选择器组合起来，更复杂的选择元素 | article > p选择<article>元素的初代子元素 |
# 伪类
| 选择器 | 描述 |
|---|---|
| :active | 在用户激活（例如点击）元素的时候匹配 |
| :any-link | 匹配一个链接的:link和:visited状态 |
| :blank | 匹配空输入值的<input>元素 |
| :checked | 匹配处于选中状态的单选或者复选框 |
| :current | 匹配正在展示的元素，或者其上级元素 |
| :default | 匹配一组相似的元素中默认的一个或者更多的UI元素 |
| :dir | 基于其方向性（HTMLdir属性或者CSSdirection属性的值）匹配一个元素 |
| :disabled | 匹配处于关闭状态的用户界面元素 |
| :empty | 匹配除了可能存在的空格外，没有子元素的元素 |
| :enabled | 匹配处于开启状态的用户界面元素 |
| :first | 匹配分页媒体的第一页 |
| :first-child | 匹配兄弟元素中的第一个元素 |
| :first-of-type | 匹配兄弟元素中第一个某种类型的元素 |
| :focus | 当一个元素有焦点的时候匹配 |
| :focus-visible | 当元素有焦点，且焦点对用户可见的时候匹配 |
| :focus-within | 匹配有焦点的元素，以及子代元素有焦点的元素 |
| :future | 匹配当前元素之后的元素 |
| :hover | 当用户悬浮到一个元素之上的时候匹配 |
| :indeterminate | 匹配未定态值的UI元素，通常为复选框 |
| :in-range | 用一个区间匹配元素，当值处于区间之内时匹配 |
| :invalid | 匹配诸如<input>的位于不可用状态的元素 |
| :lang | 基于语言（HTMLlang属性的值）匹配元素 |
| :last-child | 匹配兄弟元素中最末的那个元素 |
| :last-of-type | 匹配兄弟元素中最后一个某种类型的元素 |
| :left | 在分页媒体中，匹配左手边的页 |
| :link | 匹配未曾访问的链接 |
| :local-link | 匹配指向和当前文档同一网站页面的链接 |
| :is() | 匹配传入的选择器列表中的任何选择器 |
| :not | 匹配作为值传入自身的选择器未匹配的物件 |
| :nth-child | 匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等 |
| :nth-of-type | 匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等 |
| :nth-last-child | 匹配一列兄弟元素，从后往前倒数 |
| :nth-last-of-type | 匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数 |
| :only-child | 匹配没有兄弟元素的元素 |
| :only-of-type | 匹配兄弟元素中某类型仅有的元素 |
| :optional | 匹配不是必填的form元素 |
| :out-of-range | 按区间匹配元素，当值不在区间内的的时候匹配 |
| :past | 匹配当前元素之前的元素 |
| :placeholder-shown | 匹配显示占位文字的input元素 |
| :playing | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素 |
| :paused | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素 |
| :read-only | 匹配用户不可更改的元素 |
| :read-write | 匹配用户可更改的元素 |
| :required | 匹配必填的form元素 |
| :right | 在分页媒体中，匹配右手边的页 |
| :root | 匹配文档的根元素 |
| :scope | 匹配任何为参考点元素的的元素 |
| :valid | 匹配诸如<input>元素的处于可用状态的元素 |
| :target | 匹配当前URL目标的元素（例如如果它有一个匹配当前URL分段的元素） |
| :visited | 匹配已访问链接 |
# 伪元素
| 选择器 | 描述 |
|---|---|
| ::after | 匹配出现在原有元素的实际内容之后的一个可样式化元素 |
| ::before | 匹配出现在原有元素的实际内容之前的一个可样式化元素 |
| ::first-letter | 匹配元素的第一个字母 |
| ::first-line | 匹配包含此伪元素的元素的第一行 |
| ::grammar-error | 匹配文档中包含了浏览器标记的语法错误的那部分 |
| ::selection | 匹配文档中被用户选择的那部分（user-select） |
| ::spelling-error | 匹配文档中包含了浏览器标记的拼写错误的那部分 |
| ::slotted() | 选定那些被放在 HTML模板 中的元素 (更多请查看 使用模板和插槽 (opens new window)). |
| ::cue | 匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。 |
css Arrow (opens new window)
more about "伪类和伪元素" (opens new window)
more about "Css3 selectors" (opens new window)
# 其他
- 当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略
h1, ..special { color: blue; }1
2
3 - 虽然这些样式（:visited）可以改变用户最终的颜色外观，但 window.getComputedStyle 方法将存在并且始终返回非访问颜色的值