前端之选择器

# CSS选择器

## 一、基础选择器

#### 1、通配选择器

```css
* {
    border: solid;
}
匹配文档中所有标签：通常指html、body及body中所有显示类的标签
```

#### 2、标签选择器

```css
div {
    background-color: yellow;
}
匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span
```

#### 3、类选择器

```css
.red {
    color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配
```

#### 4、id选择器

```css
#div {
    text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配
```

## 二、基础选择器优先级

- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器

###### v_hint：id选择器必须保证单文档的唯一性

## 三、组合选择器

#### 1、群组选择器

```css
div, span, .red, #div {
    color: red;
}
```

- 一次性控制多个选择器
- 选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合

#### 2、子代(后代)选择器

```css
子代选择器用>连接
body > div {
    color: red;
}
后代选择器用空格连接
.sup .sub {
    color: red;
}
```

- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系

#### 3、相邻(兄弟)选择器

```css
相邻选择器用+连接
.d1 + .d2 {
    color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
    color: red;
}
```

- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

#### 4、交集选择器

```css
<div class="d" id="dd"></div>
div.d#dd {
    color: red;
}

<div class="d1 d2 d3"></div>
.d1.d2.d3 {
    color: red;
}
```

## 四、组合选择器优先级

- 组合选择器优先级与权值相关，权值为权重和
- 权重对应关系

|   选择器   | 权重  |
| :--------: | :---: |
|    通配    |   1   |
|    标签    |  10   |
|  类、属性  |  100  |
|     id     | 1000  |
| !important | 10000 |

- 选择器权值比较，只关心权重和，不更新选择器位置
- 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合

## 五、属性选择器

- [attr]：匹配拥有attr属性的标签
- [attr=val]：匹配拥有attr属性，属性值为val的标签
- [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
- [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
- [attr*=val]：匹配拥有attr属性，属性值包含val的标签

###### v_hint：属性选择器权重等价于类

###### v_test：掌握所有选择器，并熟知选择器优先级