前端

在 CSS (层叠样式表) 中，选择器的权重由其特定性（specificity）确定。具有更高特定性的样式规则将覆盖较低特定期的规则。以下就是计算特定性的方法：

1. 内联样式（Inline Styles）：在 HTML 元素内部使用 `style` 属性定义的样式。例如 `<div style="color: red;">` 的权重是 `1000`。
2. ID 选择器：如 `#content`（权重为 `0100`）。
3. 类选择器、属性选择器、伪类选择器：如 `.class`, `[type="text"]`, `:hover`（权重为 `0010`）。
4. 元素选择器、伪元素选择器：如 `div`, `p`, `::before` （权重为 `0001`）。
5. 特殊选择器：`*`、`+`、`>`、`~` 这些组合选择器不增加权重。
6. 对于 `!important` 属性权重最高，出现在样式属性值后,如 `color: red !important;` 。

计算权重时，各类选择器的数量是独立计算的，比较权重时，会按照四个层级（四个数字）进行逐级比较，权重高的样式优先生效。例如, ID 选择器的权重更高，所以 `#id p`（一个 ID 和一个元素，权重为 `0101`）会覆盖 `.class .class .class`（三个类，权重为 `0030`）的样式。可理解各部分权重为 四个 "十进制位"，高位权重大于低位。

> 请注意：权重只是决定 CSS 样式冲突的一个因素，还应考虑源代码的顺序和继承。


CSS 选择器用于决定某个HTML元素上应用哪些样式。

以下是一些常用的CSS选择器：

**1. 元素选择器**

基于HTML元素的名称选择元素。例如，选择所有的 `<p>` 元素：

```css
p {
    color: red;
}
```

**2. id 选择器**

使用HTML元素的 `id` 属性选择特定元素。id 选择器在CSS中使用 #" 符号定义。例如,选择 `id="intro"`的元素：

```css
#intro {
    color: blue;
}
```

**3. 类选择器**

使用HTML元素的 `class` 属性选择特定元素。类选择器在CSS中使用 `.` 符号定义。例如,选择 `class="highlight"`的所有元素：

```css
.highlight {
    background-color: yellow;
}
```

**4. 属性选择器**

可以选择带有指定属性的HTML元素。例如，选择所有带有 `target` 属性的 `<a>` 元素：

```css
a[target] {
    background-color: pink;
}
```

**5. 伪类选择器**

用于选择HTML元素的特定状态。例如，选择鼠标悬停在上面的 `<a>` 元素：

```css
a:hover {
    color: green;
}
```

**6. 伪元素选择器**

用于选择元素的某一部分。例如，选择每个 `<p>` 元素的第一行：

```css
p::first-line {
    color: orange;
}
```

**7. 组合选择器**

有时候，我们需要选择满足多项条件的元素，这时候就可以使用组合选择器。常见的组合选择器如下：

- 后代选择器（空格）

```css
div p {
    color: brown;
}
```

- 子代选择器（>）

```css
div > p {
    color: purple;
}
```

- 相邻兄弟选择器（+）

```css
div + p {
    color: gray;
}
```

- 一般兄弟选择器（~）

```css
div ~ p {
    color: teal;
}
```


css 选择器的权重计算方式