一、选择器
选择器，也可叫选择符，主要在 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;} 表示鼠标划过和点击时超链接的状态一样
针对盒子模型时，伪类选择器可以搭配后代选择器，在盒子满足某一状态时，只对盒子中的某一元素进行样式更改。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 基本样式 */
.box {
width: 200px;
height: 100px;
background-color: pink;
}
.box div {
height: 50px;
background-color: yellow;
}
/* 伪类选择器 */
.box:hover div {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div>
<p>文本内容</p>
</div>
<p>文本内容</p>
</div>
</body>
</html>
7. 伪元素选择器
伪元素并非真正的元素，只能寄托父元素身上。
1、::first-letter：对元素内容的第一个字母进行选择；
2、::first-line：对元素内容的第一行进行选择；
3、::before：用于创建一个伪元素，作为选中元素的第一个子元素；
3、::after：用于创建一个伪元素，作为选中元素的最后一个子元素；
::before 和 ::after 可通过 content 属性添加内容，但该内容在网页中不可被选中，并非真正的元素，且该虚拟元素为行内元素；
二、选择器的权重
当多个选择器，选中的是同一个元素，且都定义了样式，此时，若属性发生冲突，即同一属性设置了不同值，则按照两个原则：
一是根据权重高的来执行，高权重会覆盖低权重的样式。
二是当权重相同时，遵循就近原则，哪个选择符最后定义，就采用哪个。
权重：id 选择器 > 类选择器 > 元素选择器
包含选择符为其包含的所有选择符的权重之和。
!important > 内联样式 > 任一选择器
三、结语
本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
