CSS的选择器分为全局选择器、元素选择器、类选择器、ID选择器和合并选择器
1.全局选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3{
color: green;
}
*{
font-size: 30px;
color: blue;
}
</style> <!--全局选择器，页面中所有标签都会改变-->
<!--h3的样式会进行改变，因为全局选择器优先级低-->
</head>
<body>
<h3>段落</h3>
<p>你好</p>
<ul>
<li>111</li>
<li>222</li>
</ul>
</body>
</html>
全局选择器与任何元素匹配，一般进行初始化，全局选择器基本框架为*{}，，优先级最低，如上元素选择器将全局选择器的初始化覆盖了过去
2.元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: blueviolet;
}
span{
color: coral;
font-size: 50px;
}
</style>
</head>
<body>
<p>第一个</p>
<p>第二个</p>
<p>我听过<span>TFBOYS</span>的歌</p>
</body>
</html>
元素选择器是根据元素名称来进行选择，它描述的是“共性”而不是“个性”，所有的选择器标签都会发生改变，所有标签都可以是选择器，选择所有，而不是一个；其基本框架为选择器名{}
3.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
.Frist{
color: blueviolet;
}
p{
color: brown;
}
.size{
font-size: 50px;
}
</style> <!--可以改变自己所需要的标签样式 用.定义-->
</head>
<body>
<p class="Frist">111</p>
<p>222</p>
<p class="Frist">333</p> <!--标签名字可一致，样式都会一起发生改变-->
<h3 class="Frist size">66</h3> <!--可被多个选择器选用，不区分标签 可以有多个类选择器，在class 中用空格隔开，不能有多个claas-->
</body>
</html>
类选择器是将标签进行了重命名,在标签中用class来进行命名，注意：不能以数字开头，可以有多个类名，但只能有一个class，其基本框架为.+类名{}，其更加灵活，方便，标签之间名字可相同。
4.ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#xxx{
color: yellowgreen;
}
.xxxx{
color: violet;
}
</style>
</head>
<body>
<p id="xxx">666</p>
<p id="xxx">77</p> <!--可以改变样式，但不符合规范 不能使用 id名称不能重复 不能用数字头-->
<p class="xxxx">777</p>
<h3 class="xxxx">9999</h3>
</body>
</html>
ID选择器是在标签中用id来进行命名，其基本框架为#+类名{}。id选择器类名不可重复。
5.合并选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p,h3{
color: blue;
font-size: 35px;
}
.xxx,#xx{
color: tomato;
}
</style> <!--可以同时改变多个标签样式，选择器用，隔开-->
</head>
<body>
<p>111</p>
<h3>666</h3>
<p class="xxx">222</p>
<h3 id="xx">33</h3>
</body>
</html>
合并选择器可有效减少代码的重复，其基本框架为选择器1+选择器2{}
选择器的优先级为:行内样式>id>class>元素
标签：color,标签,元素,Document,选择器,CSS,size From： https://www.cnblogs.com/songs7/p/17716380.html