一、选择器

选择器，也可叫选择符，主要在 CSS 想对 HTML 页面中的元素实现一对一，一对多或多对一的控0制时所使用。

1. 元素选择器

元素选择器，又叫类型选择器。主要是将一个大类的标签名称当做选择器使用，所有的页面元素都可以作为选择器使用，缺点在于范围太广。

CSS代码如下：

div{background-color: yellow;
}

2. 类选择器

类选择器，也是 class 选择器，给标签设置类名，常用于给某几个标签设置统一样式。同一标签中可以设置多个类名，以空格间隔。
同一标签中，不同类选择器的属性有重复时，根据 CSS 代码中类选择器的先后顺序决定，顺序在后的会覆盖顺序在前的同一属性。

用法：给要统一样式的某几个标签添加 class 属性，属性值为任意名称，在 CSS 代码中通过 .class名称{ } 的形式使用。

HTML代码如下：

<div>111</div>
<div class="ch1 ch2">222</div>
<div>333</div>
<p class="ch1">444</p>
<p class="ch1">555</p>
<p>666</p>

CSS代码如下：

.ch1{background-color: yellow;
}
.ch2{color: red;
}

3. id选择器

可为单个标签设置样式，通过为标签添加 id 属性，自行设置 id 名称，名称必须是英文名且不能为关键字。在 CSS 代码中通过 #id名{ } 的形式更改具体标签的样式。
id 具有唯一性，id 名称不可重复，且不可像 class 那样以空格间隔，只可以有一个值。

HTML代码如下：

<div>111</div>
<div id="box1">222</div>

CSS代码如下：

#box1{background-color: yellow;
}

4. 通配符选择器

通配选择符 * 可以为所有元素设置样式。
语法：*{属性：属性值}

CSS代码如下：

*{/* 清空所有元素的外边距 */margin: 0;/* 清空所有元素的内边距 */padding: 0;
}

5. 群组和后代选择器

群组选择器为合并写法，适用于多个标签进行同一样式的设置时，使用时以逗号间隔，其优点在于节约代码量。
语法：选择器1,选择器2,选择器n {属性：属性值}

后代选择器，又叫包含选择器，具体标签中包含该后代的才会改变样式，使用时以空格间隔。
匹配原则从右到左，如 div p 中会先找所有的 p 标签，然后再找包在外的 div 标签。

HTML代码如下：

<div><!-- p标签被包含在div标签中 --><p>11111</p>
</div>
<p id="ch1">444</p>
<p>666</p>

CSS代码如下：

/* 群组选择器 */
div,#ch1{background-color: yellow;
}
/* 后代选择器 */
div p{color: red;
}

6. 伪类选择器

伪类选择器主要用于 a 链接，在 a 链接满足一定状态时样式才生效，例如：鼠标悬停、鼠标按下等。

状态：
1、超链接的初始状态。
语法：a:link{属性：属性值}
2、超链接被访问后的状态。
语法：a:visited{属性：属性值}
3、鼠标悬停，即鼠标划过超链接的状态。
语法：a:hover{属性：属性值}
3、超链接被激活，即鼠标按下时超链接的状态。
语法：a:active{属性：属性值}

注意：
1、当4个超链接伪类选择符联合使用时，要注意顺序，正常顺序为a:link,a:visited,a:hover,a:active，错误的顺序可能导致样式失败。
2、为简化代码，伪类选择符中相同的声明可以提出来放在 a 选择符中。
如：a{color: red;} 表示超链接的初始和访问过后的状态一样
a:hover{color: green;} 表示鼠标划过和点击时超链接的状态一样

二、选择器的权重

当多个选择器，选中的是同一个元素，且都定义了样式，此时，若属性发生冲突，即同一属性设置了不同值，则按照两个原则：
一是根据权重高的来执行，高权重会覆盖低权重的样式。
二是当权重相同时，遵循就近原则，哪个选择符最后定义，就采用哪个。

权重：id 选择器 > 类选择器 > 元素选择器
包含选择符为其包含的所有选择符的权重之和。
!important > 内联样式 > 任一选择器

三、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！