《个人学习笔记 十》
三大选择器是哪三个？
id选择器、类选择器、标签选择器
优先级
id选择器>类选择器>标签选择器
标签选择器：
- 标签选择器又称元素选择器
- 作用：根据标签名来选中指定的元素
- 语法：标签名{}
- 例子：p{} h1{} div{}
示范代码：
<!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 {
background-color: yellow;
color: red;
font-size: 50%;
font-family: 黑体;
}
</style>
</head>
<body>
<p>这段文字被修改为背景颜色为黄色，字体颜色为红色，字体大小为50%, 字体为黑体
</p>
</body>
</html>
显示结果：
id选择器
- 作用：根据元素的id属性值选中一个元素
- 语法：#id属性值{}
- 例子：#box{} #red{}
示范代码;
<!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>
#red {
color: red;
}
#bgc {
background-color: green;
}
</style>
</head>
<body>
<h4 id="red">我想把这段字变成红色</h4>
<h4 id="bgc"> 我想把这段字背景设为绿色</h4>
</body>
</html>
执行结果：
类选择器：
- 作用：根据元素的class属性值选中一个元素
- 语法：.class属性值{}
- 例子：.blue{} .yellow{}
示范代码：
<!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>
.blue {
color: blue;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<h4 class="blue">我想把这段文字变成蓝色</h4>
<h4 class="yellow">我想把这段文字背景变成黄色</h4>
</body>
</html>
显示结果：
