CSS选择器

[TOC]

## 1. 选择器种类

## 2. 选择器的优先级

下面是从高到低排序，序号越小优先级越高

|序号|选择器|说明|权重|
|--|--|--|--|
|1|内联样式|示例：`<p style=""><p/>`<br>|内联样式的权重最高,为1,0,0,0|
|2|ID选择器|示例：`#id`|ID选择器权重为0,1,0,0|
|3|类选择器、属性选择器、伪类选择器|示例：`.class`、`[name="name1"]`、`:hover`|类选择器、属性选择器、伪类选择器权重都为0,0,1,0|
|4|元素选择器、伪元素选择器|示例：`div`、`::before`|元素选择器、伪元素选择器权重都为0,0,0,1|
|5|相邻兄弟选择器、一般兄弟选择器、子选择器|示例：`A + B`、`A ~ B`、`A > B`|相邻兄弟选择器、一般兄弟选择器、子选择器权重都为0,0,0,1|
|6|通配符选择器|示例：`*`|通配符选择器权重都为0,0,0,0|
|7|继承的样式||继承的样式权重都为0,0,0,0|
|8|浏览器默认样式||浏览器默认样式权重都为0,0,0,0|

### 2.1. !important

除了权重之外，还可以使用!important关键字来设置样式的优先级，使其高于其他所有样式。但是，使用!important关键字应该谨慎，因为它会影响样式的可维护性。

```CSS
#id {background-color:red}
p{background-color:blue !important}
/*现在HTML页面上的p元素的背景颜色应该现实的是蓝色，这里就是使用!important来提升p元素选择器中背景颜色的优先级*/
```

### 2.2. 组合选择器
组合选择器就是多个选择器连在一起使用，例如`div.class1`，组合选择器的优先级需要按照权重来计算，上面说到类选择器的权重是`0,0,1,0`，元素选择器的权重是`0,0,0,1`，因此`div.class1`这个组合选择器的权重就是`0,0,1,1`，那么它现在的优先级是大于类选择器，小于id选择器的。

```CSS
.class1 {
  color: red;
}
.class2 {
  color: blue;
}
.class1.class2 {
  color: green;
}
/*同时在一个元素上应用了class1和class2,那么该元素的颜色会是绿色，因为两个类选择器组合在一起，它的权重就是【0,0,2,0】，大于单个的类型选择器*/
```

> 在优先级相同的情况下，最后定义的样式会覆盖前面定义的样式。

## 3. 常用选择器

### 3.1. 伪元素选择器

+ 伪元素创建的不是真正的元素,但是可以像普通元素一样添加样式
+ 通过元素添加的内容，在浏览器上无法选中复制
+ 使用伪元素选择器时需要注意，双冒号`::`前后不要出现空格，错误的写法<mark>div ::before</mark>，正确的应该是<mark>div::before</mark>

#### 3.1.1. ::before

效果：在元素前面插入内容

```HTML
<style>
p::before {content: "注：";}
</style>
<p>我是一段文字</p>
```

上面代码输出的结果是：
> 注：我是一段文字

#### 3.1.2. ::after

效果：在元素后面插入内容

```HTML
<style>
p::after {content: "注：";}
p::before {content: "（汉字）";}
</style>
<p>我是一段文字</p>
```

上面代码输出的结果是：
> 注：我是一段文字（汉字）

#### 3.1.3. ::first-line

效果：选择元素的第一行

```HTML
<style>
p::after {content: "注：";}
p::before {content: "（汉字）";}
p::first-line {font-weight:bold;}
</style>
<p>我是一段文字，<br/>我是第二行文字，</p>
```

上面代码输出的结果是：
> **注：我是一段文字，**
我是第二行文字（汉字），

#### 3.1.4. ::first-letter

效果：选择元素的第一个字母/文字

```HTML
<style>
p::before {content: "注：";}
p::before {content: "（汉字）";}
p::first-line {font-weight:bold;}
p::first-letter {font-size: 120%;}
</style>
<p>我是一段文字，<br/>我是第二行文字，</p>
```

上面代码输出的结果是：

> **<span style="font-size: 120%">注</span>：我是一段文字，**
我是第二行文字（汉字），

<span style="color:red">由`::before`伪元素创建的内容，`::first-letter`选择器同样有效</span>

#### 3.1.5. ::selection

效果：选择元素中被选中的部分

```HTML
<style>
p::selection { background-color: yellow;}
</style>
<p>我是一段文字</p>
```

上面代码输出的结果是：

> 我是<span style="background-color: yellow">一段文字</span>

<span style="color:red">上面“一段文字”就是选中后的结果（默认是蓝色）</span>

### 3.2. 伪类选择器
CSS中的伪类选择器用于选择元素的特定状态，常用的伪类选择器有下面几类

#### 3.2.1. :nth-child(n)
效果：选择第n个子元素

+ 2n+1 选择中一组元素中为奇数的子元素
+ 2n 择中一组元素中为偶数的子元素

```HTML
<style>
p:nth-child(2n+1){background-color:red;} // 奇数子元素
p:nth-child(2n){background-color:yellow;} // 偶数子元素
p:nth-child(2){color:white;} //第二个子元素
</style>
<p>我是一段文字</p>
<p>我是二段文字</p>
<p>我是三段文字</p>
<p>我是四段文字</p>
```

上面代码输出的结果是：

> <span style="background-color: red">我是一段文字</span>
<span style="background-color: yellow;color:white;">我是二段文字</span>
<span style="background-color: red">我是三段文字</span>
<span style="background-color: yellow">我是四段文字</span>

#### 3.2.2. :hover

效果：选择鼠标悬停在元素上时的状态

```HTML
<style>
a:hover {color: red;}
</style>
<a>我是一段文字</a>
```

上面代码输出的结果是：

> 我是一段文字
鼠标悬停后的样式：<span style="color:red">我是一段文字</span>

#### 3.2.3. :active

效果：选择鼠标点击下去未弹起时的状态

```HTML
<style>
a:active  {color: blue;}
</style>
<a>我是一段文字</a>
```

上面代码输出的结果是：

> 我是一段文字
鼠标点击未放开时的样式：<span style="color:blue">我是一段文字</span>

#### 3.2.4. :focus

效果：选择获得焦点的表单元素状态

```HTML
<style>
input:focus  {border-color: blue;}
</style>
<input type="text">
```

上面代码输出的结果是：一个输入框，当鼠标点击输入框获取焦点时，输入框的边线变成了蓝色

#### 3.2.5. :first-child
效果：选择第一个子元素

```HTML
<style>
p:first-child{color:red;}
</style>
<p>我是一段文字</p>
<p>我是二段文字</p>
<p>我是三段文字</p>
<p>我是四段文字</p>
```

上面代码输出的结果是：

> <span style="color: red">我是一段文字</span>
我是二段文字
我是三段文字
我是四段文字

### 3.3. 子元素选择器
效果：选择作为某元素的子元素的元素

```HTML
<style>
div > p {color: red; }
</style>
<div>
<p>我是有效的p元素</p>
<span>我是无效的span元素</span>
</div>
```

上面代码输出的结果是：

> <span style="color: red">我是有效的p元素</span>
我是无效的span元素

### 3.4. 相邻兄弟选择器
效果：选择紧接在另一个元素后的元素:

```HTML
<style>
p + span {color: red; }
</style>
<div>
<p>我是有效的p元素</p>
<span>我是有效的span元素</span><br/>
<label>我是无效的label元素</label>
</div>
```

上面代码输出的结果是：

> 我是有效的p元素
<span style="color: red">我是有效的span元素</span>
我是无效的label元素

<span style="color: red">注意：这里相邻的元素必须是下一个兄弟元素，如果示例中将span元素和label元素调换的话，那么样式是不会起作用的，把span元素放在p元素前面，样式也不会起作用</span>

### 3.5. 一般兄弟选择器
效果：选择另一个元素之后的所有元素:

```HTML
<style>
p ~ span {color: red; }
</style>
<div>
<span>我是无效的span元素</span>
<p>我是有效的p元素</p>
<span>我是有效的span元素</span><br/>
<label>我是无效的label元素</label><br/>
<span>我是有效的span元素</span><br/>
<span>我是有效的span元素</span>
</div>
```

上面代码输出的结果是：

> 我是无效的span元素
我是有效的p元素
<span style="color: red">我是有效的p元素</span>
我是无效的label元素
<span style="color: red">我是有效的p元素</span>
<span style="color: red">我是有效的p元素</span>

<span style="color: red">注意：这里是目标元素之后所有匹配的兄弟元素都会生效，示例中所有p元素之后的span兄弟元素都生效了，但放在p元素之前的span兄弟元素是不会生效的</span>

### 3.6. 属性选择器

#### 3.6.1. 精准等于属性值

选择 attribute 属性值精确等于 "value" 的所有元素

```HTML
<style>
    [class="exact"] {
        text-decoration: underline;
    }
</style>
<p class="exact">这个段落的文字会有下划线。</p>
<p class="exact more">这个段落的文字不会有下划线，因为 class 不完全匹配。</p>
```

#### 3.6.2. $符号

属性选择器中使用$符号，其作用是选择属性值以某个字串结尾的所有元素，例如`[class$="face"]`，其作用是选择 class 属性值以 "face" 结尾的所有元素

```HTML
<style>
    [class$="face"] {
        color: red;
    }
</style>
<body>
    <p class="myface">这段文字会变成红色，因为 class 以 face 结尾。</p>
    <p class="face">这段文字也会变成红色。</p>
    <p class="notfaceexample">这段文字不会变成红色，因为 class 不以 face 结尾。</p>
</body>
```

#### 3.6.3. ^符号

属性选择器中使用^符号，其作用是选择属性值以某个字串开头的所有元素，例如`[attribute^="value"]`，其作用是选择 attribute 属性值以 "value" 开头的所有元素

```HTML
<style>
    [class^="start"] {
        background-color: yellow;
    }
</style>
<p class="startText">这个段落的背景会是黄色。</p>
<p class="notStartText">这个段落的背景不会是黄色。</p>
```

#### 3.6.4. \*符号

属性选择器中使用\*符号，其作用是选择属性值中包含某字符串的所有元素，例如`[attribute*="value"]`，其作用是选择 attribute 属性值中包含 "value" 的所有元素

```HTML
<style>
    [class*="contain"] {
        font-weight: bold;
    }
</style>
<p class="thisContains">这个段落的文字会加粗。</p>
<p class="noContain">这个段落的文字不会加粗。</p>
```

#### 3.6.5. ~符号

属性选择器中使用~符号，其作用是选择属性值中包含独立的某字符串的所有元素，例如`[attribute~="value"]`，其作用是选择 attribute 属性值中包含独立的 "value" 单词的所有元素

```HTML
<style>
    [class~="word"] {
    color: green;
    }
</style>
<p class="has word">这个段落的文字会变成绿色。</p>
<p class="hasword">这个段落的文字不会变成绿色，因为 word 不是独立单词。</p>
```

#### 3.6.6. |符号

属性选择器中使用|符号，例如`[attribute|="value"]`，其作用是选择 attribute 属性值以 "value" 开头，并且后面紧跟 - 或者精确等于 "value" 的所有元素

```HTML
<style>
    [lang|="en"] {
        font-style: italic;
    }
</style>
<p lang="en">这个段落的文字会变成斜体。</p>
<p lang="en-US">这个段落的文字也会变成斜体。</p>
<p lang="fr">这个段落的文字不会变成斜体。</p>
```