CSS中三大基础选择器以及优先级介绍
三大选择器是哪三个？
id选择器、类选择器、标签选择器
优先级
id选择器>类选择器>标签选择器
标签选择器：
标签选择器又称元素选择器作用：根据标签名来选中指定的元素语法：标签...
三大选择器是哪三个？
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>
显示结果：
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
程序员编程交流QQ群：805358732
如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。
- 发表于 2021-07-15 14:17
- 阅读 ( 729 )
- 分类：WEB前端开发
