1.基础选择器
选择器作用：查找标签设置样式
-
标签选择器：使用标签名作为选择器
-
类选择器：（1）定义类选择器 --> .类名（2）使用类选择器 标签添加 class = "类名"
<style>
/* 定义 */
.green{
color: green;
}
.size {
font-size: 10px;
}
</style>
<!-- 使用 -->
<!-- 一个类选择器可以给多个标签使用 -->
<p class="green">1111</p>
<p>2222</p>
<!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
<div class="green size">div 标签</div>-
id选择器：（1）在CSS中定义 id选择器 --->
#id自定义名字
（2）使用id选择器 --> 标签 添加 属性 id= "id名字"
<head>
<style>
/* 定义 */
#green{
color: green;
}
</style>
</head>
<body>
<!-- 使用 -->
<div id="green">div 标签</div>
</body>- 通倍符选择器：
* {}
<style>
* {
color: green;
}
</style>
<body>
<p>p 标签</p>
<div>div 标签</div>
<h1>h1 标签</h1>
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<strong>strong</strong>
</body>2.复合选择器
定义：两个或者多个基础选择器组成 通过不同的方式组合而成
作用： 更准确， 更高效的选择目标元素
常用的复和选择器：后代，子代，并集，伪类
（1）后代选择器：选中某元素的后代元素 ；
写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。
范围： 选中是指定的所有后代 包含 儿子和孙子。
<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>后代选择器</title>
<style>
/* div 里面的 span 文字颜色是绿色 */
/* 后代选择器，选中所有后代，包含儿子、孙子、... */
div span {
color: green;
}
</style>
（2）子代选择器：范围： 选中的是 亲儿子元素（即嵌套的第一层元素）
语法： 选择器1 >选择器2 {}
<head>
<title>子代选择器</title>
<style>
/* div 的儿子 span 文字颜色是绿色 */
div > span {
color: green;
}
</style>
</head>
（3）并集选择器：范围： 选中的是 多组标签 设置同样的样式
语法： 选择器1 , 选择器2, 选择器3{}
（4）伪类选择器：表示元素的状态， 选中某个状态 设置样式
鼠标悬停的状态： 选择器:hover {} 只有鼠标移入 悬停才会触发这个样式
<style>
/* 任何标签都可以设置鼠标悬停的状态 */
a:hover {
color: red;
}
/* div:hover */
.box:hover {
color: green;
}
</style>
</head>
<body>
<a href="#">这是个a 标签，超链接</a>
<div class="box">div 标签</div>
</body>3.选择器进阶
（1）结构伪类选择器：根据元素的结构关系查找元素 nth-child()
（2）伪元素选择器
标签：color,标签,常见,id,green,div,选择器,CSS From： https://blog.csdn.net/weixin_65096435/article/details/136661448