三种基本选择器
三种基本选择器
标签选择器
同类型标签设置：例如设置h1标签，则所有的h1标签都会被设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器学习</title>
<style>
h1 {
color: #429393;
background: #4949b3;
}
</style>
</head>
<body>
<h1>第一个一级标签</h1>
<h1>第二个一级标签</h1>
<h1>第三个一级标签</h1>
</body>
</html>
类选择器
按照class类别设置，可设置多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器学习</title>
<style>
.class1 {
color: yellow;
}
.class2 {
color: #4949b3;
}
</style>
</head>
<body>
<h1 class="class1">第一个一级标签</h1>
<h1 class="class1">第二个一级标签</h1>
<h1 class="class2">第三个一级标签</h1>
</body>
</html>
id选择器
仅能设置唯一的标签，因为id唯一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器学习</title>
<style>
#id1 {
color: #429393;
background: #4949b3;
}
#id2 {
color: #6b9342;
background: #4949b3;
}
#id3 {
color: #9e402f;
background: #4949b3;
}
</style>
</head>
<body>
<h1 id="id1">第一个一级标签</h1>
<h1 id="id2">第二个一级标签</h1>
<h1 id="id3">第三个一级标签</h1>
</body>
</html>
三种选择器的优先级
id选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种基本标签选择器优先级</title>
<style>
#id1 {
color: blue;
}
h1 {
color: yellow;
}
.class1 {
color: red;
}
</style>
</head>
<body>
<h1 id="id1" class="class1">第一个一级标签</h1>
<h1 class="class1">第二个一级标签</h1>
<h1>第三个一级标签</h1>
</body>
</html>
