选择器优先级别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
/*标签选择器*/
div{
color: red;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>代码：
“*” 是通配符，可以匹配所有的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>
代码：当前div标签的颜色是绿色，因为是就近原则，div标签与green设计的样式最近。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
/*类选择器*/
.test1{
color: goldenrod;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div class="test1">我是div</div>
</body>
</html>
代码：类选择器 > 标签选择器
上图：可以看到 类选择器 是 优先于 标签选择器的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
1.相同级别的选择器：a.就近原则 b.叠加原则
2.优先级：
类选择器 > 标签选择器
-->
<style>
/*类选择器*/
.test1{
color: goldenrod;
}
.test2{
color: purple;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div class="test1 test2">我是div</div>
</body>
</html>
代码：
在div标签中在加一个 test2类标签（针对同一个标签，类标签可以同时加多个）；
设计test2类标签为紫色。
上图：图中是紫色；当前有test1和test2两个类选择器，相同类别是就近原则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
1.相同级别的选择器：a.就近原则 b.叠加原则
2.优先级：
id选择器 > 类选择器 > 标签选择器
-->
<style>
/*id选择器*/
#main{
color:mediumvioletred;
}
/*类选择器*/
.test1{
color: goldenrod;
}
.test2{
color: purple;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div id="main" class="test1 test2">我是div</div>
</body>
</html>代码：id选择器 > 类选择器
上图：
id选择器 优于 类选择器； 注意id是唯一的，同一个标签不可以设置多个id，否则id选择器就会失效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
1.相同级别的选择器：a.就近原则 b.叠加原则
2.优先级：
id选择器 > 类选择器 > 标签选择器
-->
<style>
/*复合选择器*/
div.test1{
color: pink;
}
/*id选择器*/
#main{
color:mediumvioletred;
}
/*类选择器*/
.test1{
color: goldenrod;
}
.test2{
color: purple;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div id="main" class="test1 test2">我是div</div>
</body>
</html>
代码：id选择器 > div+类选择器（复合选择器）
上图：颜色没有变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
1.相同级别的选择器：a.就近原则 b.叠加原则
2.优先级：
id选择器 > 类选择器 > 标签选择器
-->
<style>
/*复合选择器*/
div.test1{
color: pink;
}
div#main{
color: cornflowerblue;
}
/*id选择器*/
#main{
color:mediumvioletred;
}
/*类选择器*/
.test1{
color: goldenrod;
}
.test2{
color: purple;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div id="main" class="test1 test2">我是div</div>
</body>
</html>
代码：div+id选择器（复合） > id选择器
选择器的针对性越强，它的优先级就越高
选择器的权值：
通配选择符（*）：0
标签： 1
类： 10
属性： 10
伪类： 10
伪元素： 10
id： 100
important： 1000
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先（就近）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
1.相同级别的选择器：a.就近原则 b.叠加原则
2.优先级：
id选择器 > 类选择器 > 标签选择器
-->
<style>
/*复合选择器*/
div.test1{
color: pink;
}
div#main{
color: cornflowerblue;
}
/*id选择器*/
#main{
color:mediumvioletred;
}
/*类选择器*/
.test1{
color: goldenrod;
}
.test2{
color: purple;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green !important;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div id="main" class="test1 test2">我是div</div>
</body>
</html>
代码：在标签选择器中加了一个 !important，所以其当前的权值是1000+1=1001
- 优先级排序
important > 行内设计 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
原文地址：https://blog.51cto.com/daimalaobing/2445587
时间： 2025-01-03 06:28:02