作用：选择页面上的某一个或某一类元素
1.标签选择器 : 选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，会选择页面上所有这个标签的元素*/
h1{
color: #45afff;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>欢迎你</p>
</body>
</html>
2.类选择器 class ： 选择所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
好处：可以复用
*/
.z1{
color: #45afff;
}
.z2{
color: green;
}
</style>
</head>
<body>
<h1 class="z1">标题1</h1>
<h1 class="z2">标题2</h1>
<h1 class="z1">标题3</h1>
<p class="z1">p标签</p>
</body>
</html>
3.id选择器 ：全局唯一 #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器： id必须保证全局唯一，不能复用
#id名称{}
不遵循就近原则，固定的
id选择器 > class选择器 > 标签选择器
*/
#i1{
color: #45afff;
}
.c1{
color: red;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1 id="i1" class="c1">标题1</h1>
<h1 class="c1">标题2</h1>
<h1 class="c1">标题3</h1>
<h1>标题4</h1>
</body>
</html>
优先级：
id > class > 标签
原文：https://www.cnblogs.com/zzh-lq/p/13579766.html