1.0 基本选择器
1.1 通配符选择器: * {}
匹配所有的HTML元素，通常用来初始化样式，设置margin和padding为0
需求：将三个元素同时改为红色
<style>
* {
color: red;
font-size: 30px;
}
</style>
<body>
<div>this is second div</div>
<p>this is p</p>
<span>this is span</span>
</body>
1.2 元素选择器
为页面中的某种元素设置统一样式,我们可以理解为选中所有同类型标签，不能进行差异化设置
语法：以 div 为例 => div {}
但是无法实现差异化设置，比如只能统一给某一类元素设置相同的样式
需求：只给div设置为绿色
<style>
div{
color:green;
}
p {
color: orange;
font-size: 40px;
}
</style>
<body>
<div>this is second div</div>
<p>this is p</p>
</bod
1.3 类选择器
根据元素的class值，来选中某些元素 ,就是说选中所有特定类名的元素
class翻译过来有：种类、类别的意思
语法： .common{color:red}; =>
- 先在元素上，通过系统内置的class属性，给该元素起名
- 在css中，通过.名字就能够匹配到刚刚的元素，就可以设置样式了
- 注意： 1. class选择器如果要同时使用多个类名，则多个类名之间使用空格分开
2.一个元素不能写多个class属性，后面写的会失效
需求：将第一个div设置为蓝色
<style>
.first {
color: skyblue;
}
.big {
font-size: 40px;
}
.small {
color: pink;
}
</style>
<body>
<div class="first">this is first div</div>
<!-- 思考：如果对同一个元素，使用两个class设置样式，会发生什么？ -->
<!-- 一个元素不能写多个class属性，后面写的会失效 -->
<div class="small" class="big">this is thrid div</div>
</body>
1.4 ID选择器
选中特定 id 的元素，具有唯一性
语法：#box{color:red} =>
根据元素的id属性值，来精准的选中某个元素，首先在元素上，使用 id="name" ,给该元素起名。
随后，在css样式表中，使用 #name 来匹配对应的元素
<style>
#first-footer {
color: red;
}
#font {
font-size: 40px;
}
#second-footer {
color: orange
}
</style>
如果类名或者id名是由多个单词组成，则多个单词之间使用" - ****"进行连接
一个元素可以同时拥有id和class
一个元素只能拥有一个id属性
common类在开发中常用于设置相同的属性
<style>
.common {
font-size: 30px;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
2.0 复合选择器
2.1 交集选择器
含义： 可以选择同时满足多个条件的元素，简单来理解就是，两个或多个选择器的交集,用法就是把两个选择器放在一起。
语法： 选择器1 选择器2 选择器3.....
用于提示用户的一个类名
需求： 当用于已经应用了提示类之后，可以继续应用成功类，如果用户没有应用提示类，直接应用成功类的话，使成功类失效。
<style>
.tip {
font-size: 30px;
font-weight: 600;
}
.tip.success {
color: green;
}
</style>
<body>
<div class="success">this is div</div>
<header class="tip success">this is header</header>
</body>
案例
需求： 封装4个button按钮，要求使用交集选择器，有一个common类，用于统一设置button的字体大小、取消边框、宽度、高度。有另外4个类，success, warning, error, primary。属性值可自行设置。
<style>
/* 该类名所设置的样式，仅提供给button按钮使用 */
.btn {
font-size: 20px;
border: none;
width: 80px;
height: 40px;
}
.btn.btn-success {
background-color: rgb(115, 202, 236);
}
.btn.btn-warning {
background-color: rgb(219, 175, 95);
}
.btn.btn-error {
background-color: red;
}
.btn.btn-primary {
background-color: green;
}
</style>
<body>
<div>
<button class="btn btn-success">按钮1</button>
<button class="btn btn-warning">按钮2</button>
<button class="btn btn-error">按钮3</button>
<button class="btn btn-primary">按钮4</button>
</div>
<p class="success">this is p</p>
</body>
2.2 并集选择器
含义：同时进行多个声明，通常用于集体声明，可以缩小样式体积 可以理解为： 是为了合并类型的样式,可以是选择器不用单样式相同的CSS语法块合并。并集选择器就是用多个逗号分隔多个选择器,如 "选择器A,选择器B"
需求： 给p,span,.box设置颜色为红色
<style>
p,
span,
.box {
color: orange;
}
</style>
<body>
<div>this is div</div>
<div class="box">this is second div</div>
<p>this is p</p>
<span>this is span</span>
</body>
需求：请您将header , id为 foo的footer, class为sec的section设置字体颜色为红色
<style>
header,
#foo,
.sec {
color: red;
}
</style>
<body>
<header>this is the first header</header>
<footer id="foo">this is the footer tag</footer>
<footer>this is the second footer</footer>
<section class="sec">this is the first section</section>
<section>this is the second section</section>
</body>
3.0 组合选择器
3.1 元素的关系
元素的关系可以分为这样几类：
- 父元素
- 子元素
- 兄弟元素
- 祖先元素：不管是对于亲儿子还是孙子或是更深层次的后代，都可以叫祖先元素
- 后代元素
为了更好的理解我们以如下代码为例：
<body>
<div>这是下午了哟</div>
<div>
<h2>我们正在学习元素间的关系</h2>
<ul>
<li>认识css</li>
<li>优先级</li>
<li>语法规范</li>
<li>选择器</li>
</ul>
</div>
</body>
3.2 后代选择器
选中指定元素中，符合要求的后代元素，简单的理解为是用空格分隔多个选择器组合
语法： 在A选择器的后代中找到B选择器所指的元素（先写祖先，再写后代)
用以下代码让我们来加深印象：
<style>
div h2 {
color: red;
}
section li {
color: red;
}
div a {
color: orange
}
</style>
<body>
<div>这是下午了哟</div>
<div>
<a href="#">这是div中的a</a>
<h2>我们正在学习元素间的关系</h2>
<ul>
<h2>这是ul的标题</h2>
<li>认识css</li>
<li>优先级</li>
<li>语法规范</li>
<li>选择器</li>
</ul>
</div>
<section>
<a href="#">这是section中的a</a>
<ul>
<h2>这是ul的标题</h2>
<li>认识css</li>
<li>优先级</li>
<li>语法规范</li>
<li>选择器</li>
</ul>
</section>
</body>
3.3 子代选择器
选中指定元素中，符合要求的子元素 => 先写父，后写子
子元素选择器和后代选择器类似，不过子元素只找子元素,不会把所有的后代都找一遍
语法： 选择器1 > 选择器2（div > p）
案例： 将father类中的子元素section和p标签设置字体颜色为红色
<style>
.father > .son2 ,
.father > p {
color: orange;
}
</style>
<body>
<div class="father">
<p>this is p</p>
<div class="son1">
<p>this is p </p>
<span>this is span</span>
<section>this is section</section>
</div>
<section class="son2">
<p>this is p </p>
<span>this is span</span>
</section>
</div>
<section>this is section</section>
</body>
3.4 相邻兄弟选择器
是选中指定元素后，选取某个符合条件且紧邻的兄弟元素，因为代码的运行是自上而下的，所以也可以理解为 紧挨着它的下一个
语法： 选择器1 + 选择器2
div + p {
color: red;
}
3.5 通用兄弟选择器
选中指定元素后，符合条件的所有兄弟元素
语法： 选择器1 ~ 选择器2 => 会匹配 选择器1 后面所有符合 选择器2 的元素
两类选择器，都只能选中指定选择器下面的符合条件的元素
<style>
/* 需求1 */
div + p {
color: red;
}
/* 需求2 */
div ~ p {
color: blue;
}
</style>
<body>
<!-- 需求1：将div下面的p标签设置为红色 -->
<!-- 需求2：将div下面的所有兄弟元素p标签设置为蓝色 -->
<p>this is the top p</p>
<div>this is div</div>
<p>this is the first p</p>
<p>this is the second p</p>
<section>
<p>this is p</p>
</section>
</body>
4.0 属性选择器
通过DOM的属性来选择DOM节点，属性选择器用括号 "[]" 包裹
语法： 如果要选择特定标签中的属性，则这样使用即可
div[title]{
color: blue;
}
4.1 [属性名]
选中具有某个属性的元素
需求： 所有具备title的元素都改为红色
[title] {
color: red;
}
4.2 [属性名 = "属性值"]
选择包含某个属性，且属性值等于指定值的元素
需求： 只有title的值是鼠标悬停的元素，才改为绿色
[title="鼠标悬停"] {
color: green;
}
4.3 [属性名^="值"]
选择包含某个属性，且属性值以指定的值开头的元素
需求：将属性名为title，且属性值为鼠标开头的元素改为橙色
[title^="鼠标"] {
color: purple;
}
4.4 [属性名$="值"]
选择包含某个属性，且属性值以指定的值结尾的元素
需求： 将属性名为title，且属性值为显示结尾的元素改为天蓝色
[title$="显示"] {
color:skyblue
}
4.5 [属性名*="值"]
选择包含某个属性，且属性值中包含值得元素
需求：选中包含 "时候" 得元素改为黄色
[title*="时候"] {
color:yellow;
}
<body>
<div title="悬停的时候就会显示">我是div</div>
<div title="鼠标悬停">我是div</div>
<div title="鼠标悬停的时候">我是div</div>
<p title="p标签">我是p标签</p>
</body>
5.0 动态伪类
有四种常用的伪类状态：
5.1 选取超链接未访问过的状态 :link
a:link {
color: red;
}
5.2 选取超链接访问过的状态 :visited
a:visited {
color: green;
}
5.3 选取鼠标悬停在元素上的状态 :hover
a:hover {
color:pink;
}
5.4 选取点中激活的元素，也就是按下鼠标不松手时的状态 :active
a:active {
color: orangered;
}
5.5 选取获取焦点的元素 :focus
input这类型表单类元素中，当用户点击元素选择到元素时，会产生聚焦行为
简单说，就是你点击input的时候，就会有一个光标在闪烁，此时就出现了一个聚焦行为
focus伪类，只有表单元素才能使用
input:focus {
background-color: orange;
}
注意： hover 和 active 是大部分元素都能用的，而link 和 visited 几乎都是a链接在用。
<!-- 如果之前有访问过a链接，a链接默认就会变为紫色
可以使用Ctrl + shift + delete 清空历史浏览记录，就会恢复蓝色 -->
<a href="https://www.qq.com">qq</a>
<a href="https://www.baidu.com">百度</a>
<div></div>
<input type="text" placeholder="请您输入内容">
6.0 UI伪类
6.1 :checked
被选中的单选按钮或者多选框 ，但也不是所有的属性都会生效，比如颜色
input:checked {
width: 50px;
height: 50px;
color: orange;
}
6.2 :disabled
被禁用的表单元素
button:disabled {
background-color: orange;
}
6.3 :enable
可用的表单元素 => 只要你没有给表单元素手动加上disabled，则默认就是enable
button:enabled{
background-color: red;
}
<body>
<!-- 鼠标聚焦后，先按住alt不松手 ，再按住 shift 键，就可以实现同时输入 -->
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<input type="checkbox" checked>
<button disabled>按钮1</button>
<button>按钮2</button>
</body>
