> For the complete documentation index, see [llms.txt](https://1425816423.gitbook.io/my-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1425816423.gitbook.io/my-knowledge-base/za-xiang/css/css-xuan-ze-qi.md).

# css选择器

## 选择器

选择器是css规则的一部分，它的作用是告诉浏览器将css规则作用于哪些元素。

css样式分为带作用域的样式(行内样式)和选择器样式，选择器是选择器样式规则的第一部分，选择器所选择的元素，叫做“选择器的对象”。

## 选择器的种类

| 选择器                                                                                     | 示例                  | 说明                   |
| --------------------------------------------------------------------------------------- | ------------------- | -------------------- |
| [元素选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors)                | `h1 { }`            | 匹配对应标签的元素            |
| [通配选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors)           | `* { }`             | 匹配所有的元素              |
| [类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors)                | `.box { }`          | 匹配对应class的元素         |
| [ID选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors)                  | `#unique { }`       | 匹配对应id的元素            |
| [属性选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors)           | `a[title] { }`      | 匹配有特定属性的元素           |
| [伪类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes)                | `p:first-child { }` | 匹配特定状态下的元素           |
| [伪元素选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements)              | `p::first-line { }` | 插入一个不在DOM树中的新的HTML元素 |
| [后代选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Descendant_combinator)         | `article p`         | 匹配所有子孙p元素            |
| [子代选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Child_combinator)              | `article > p`       | 匹配子代p元素              |
| [相邻兄弟选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p`            | 匹配h1元素相邻的首个p元素       |
| [通用兄弟选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/General_sibling_combinator)  | `h1 ~ p`            | 匹配h1元素所有兄弟p元素        |

## 选择器的优先级

### 优先级

下列三种类型的选择器优先级依次递减

元素选择器 < 类选择器 < ID选择器

从选择的范围来看，三者匹配的范围依次减少，可以理解为匹配范围越少，优先级就越大，ID选择器比元素选择器的匹配范围更小，因此ID选择器的优先级比元素选择器优先级高。

**通配选择符**（universal selector）（[`*`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors)）**关系选择符**（combinators）（[`+`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator), [`>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Child_combinator), [`~`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/General_sibling_combinator), [' '](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator), [`||`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Column_combinator)）和 **否定伪类**（negation pseudo-class）（[`:not()`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not)）对优先级没有影响。（但是，在 `:not()` 内部声明的选择器会影响优先级）。

### 行内样式

行内样式是带作用域的样式，因此优先级高于选择器样式。

### !importance

当在一个样式声明中使用一个 `!important` 规则时，此声明将覆盖任何其他声明。

不建议使用 `!important` ，因为一旦使用后此样式很难被覆盖，只有在迫不得已地情况下才使用，最好通过选择器优先级或行内样式来替代`!important` 。

**一些经验法则：**

* **一定**要优先考虑使用样式规则的优先级来解决问题而不是 `!important`
* **只有**在需要覆盖全站或外部 CSS 的特定页面中使用 `!important`
* **永远不要**在你的插件中使用 `!important`
* **永远不要**在全站范围的 CSS 代码中使用 `!important`