CSS中的选择器
基本选择器有下面三种
元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 所有此标签的元素样式都会改变 -->
<style>
h1{
color: red;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>hello world!</h1>
<h1>hello world!</h1>
<p>你好世界！</p>
</body>
</html>
class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 类选择器的格式 ： .class的名称{} -->
<!-- 好处：可以多个标签归类，是同一个class -->
<style>
.a1{
color: blue;
}
.a2{
color: yellow;
}
</style>
</head>
<body>
<h1 class = "a1">标题1</h1>
<h1 class = "a2">标题2</h1>
<h1>标题3</h1>
<p class = "a1">段落1</p>
</body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1.id选择器必须保证全局唯一
2.#id{}
3.不遵循就近原则
优先级：id选择器>class选择器>元素选择器
-->
<style>
#a1{
color: red;
}
.a2{
color: green;
}
h1{
color: blue;
}
</style>
</head>
<body>
</body>
<h1 id = "a1" class = "a2">标题1</h1>
<h1 class = "a2">标题2</h1>
<h1 class = "a2">标题3</h1>
<h1 id = "a4">标题4</h1>
<h1 id = "a5">标题5</h1>
</html>