html中!important属性的实际用法
2021-08-08 本文已影响0人
LRachel
什么是!important
!important是一个修饰符，语法是选择器{属性：属性值 !important}。作用是更改默认的CSS样式优先级。
示例
注意中间要有空格，不能有分号
-
正确示例
.p{color:#blue !important} -
错误示例
.p{color:#blue;!important}
.p{color:#blue!important}
实际用法
- 只有一条语句使用!important修饰。按照该语句样式显示，最后显示为橙色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 { color: green; }
#d1 { color: red; }
p { color: orange !important; }
</style>
</head>
<body>
<p id="d1" class="box1">文字颜色</p>
</body>
</html>
- 如果有层叠的语句都使用!important修饰，那么将按照语句所在选择器的权重大小来起作用,最后显示红色。
id选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 { color: green !important; }
#d1 { color: red !important; }
p { color: orange !important; }
</style>
</head>
<body>
<p id="d1" class="box1">文字颜色</p>
</body>
</html>
- 如果是继承过来的样式，他的权重为0，加上!important属性权重仍为0，即!important不能提升权重为0的样式，结果显示为橙色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 { color: green !important; }
p { color: orange;}
</style>
</head>
<body>
<div class="box1">
<p>文字颜色</p>
</div>
</body>
</html>
