<!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>id class 选择器</title>
<style>
/*
1、id选择器
语法:#id名
举例:#p1{}
2、class选择器
语法:.类名
举例:.p2{}
*/
#p1{
color: green;
}
.p2{
color:red;
}
.abc{
color: blue;
}
</style>
</head>
<body>
<p id="p1">这是第1个p元素,用id选择器,将字体颜色设置为绿色</p>
<p class="p2">这是第2个p元素,用类选择器,将字体颜色设置为红色</p>
<div>
<span class="p2">span的类名也叫p2,字体颜色也会变红</span>
<br>
<span class="p2 abc">一个元素可以有多个类名,用空格分开。此案例.abc选择器 会覆盖.p2 选择器设置的字体颜色</span> <!-- -->
</div>
</body>
</html>
运行结果如下: