css拾遗（4）-优先级问题
2022-03-31 本文已影响0人
姜治宇
行内样式优先级不一定是最高的
虽然行内样式优先级一般是最高的，但也有例外：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hi{
color:red !important;
}
</style>
</head>
<body>
<div class="hi" style="color:yellow;">hello</div>
</body>
</html>
最终呈现的是红色文字，说明增加了重要声明 !important 的优先级是更高的。但是重要声明滥用也是挺麻烦的，我们尽量使用css规定的优先级规则。
那如何计算优先级呢？
计算优先级
计算优先级的方式，可以用数值来标记，通常用逗号间隔。
比如“1,2，2”表示1个ID，2个类，2个标签组成。
/*1,0,1*/
#nav a{...}
/*1,1,0*/
#nav .list{...}
如下代码最终呈现是黄色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#nav a{
color:red;
}
#nav .list{
color:yellow;
}
</style>
</head>
<body>
<div id="nav">
<a href="#" class="list">hello</a>
</div>
</body>
</html>
“1,0,0”的优先级高于“0,10,2”，以此类推。
注意，以下优先级是一样的：
.nav a{...}
/*标签和类名之间没有空格*/
a.list{...}
如下代码最终呈现是黄色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav a{
color:red;
}
a.list{
color:yellow;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="list">hello</a>
</div>
</body>
</html>
如果只用类名，优先级会降低，最终还是红色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav a{
color:red;
}
.list{
color:yellow;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="list">hello</a>
</div>
</body>
</html>
经验法则
1、在选择器中不要使用ID。
就算只用一个ID，也会大幅提升优先级。
