|
总结
1.常用的选取器权重优先级：!important>id>class>tag
2.!important能够提高样式的优先级，然则不意见运用，那样这一条简写的样式属性所表率的子属性都会被应用加上！important
3.倘若两条样式都运用!important，则权重值高的优先级更高
4.在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的
5.样式指向同一元素，权重规则生效，权重大的被应用
6.样式指向同一元素，权重规则生效，权重相同期，就近原则生效，后面定义的被应用
7.样式不指向同一元素时，权重规则失效，就近原则生效，离目的元素近期的样式被应用
什么是权重
1.权重决定了你css规则怎么样被浏览器解析直到生效。“css权重关系到你的css规则是怎么样表示的”。
2.当非常多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或是优先级的过程。
3.每一个选取器都有自己的权重。你的每条css规则，都包括一个权重级别。 这个级别是由于区别的选取器加权计算的，经过权重，区别的样式最后会功效到你的网页中 。
4.倘若两个选取器同期功效到一个元素上，权重高者生效。
权重记忆口诀：从0起始，一个行内样式+1000，一个id选取器+100，一个属性选取器、class或伪类+10，一个元素选取器，或伪元素+1，通配符+0。
如下
样式重复多写的状况
在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的，在研发中基本不会运用。
#box {
bac公斤round-color: green;
}
/* 这条生效 */
#box {
bac公斤round-color: blue;
}
区别权重，则权重高的生效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>权重高的样式生效</title>
<style>
/* 权重值：1 */
div{
width: 100px;
height: 100px;
bac 公斤round-color: red;
}
/* 权重值：10 */
.box2{
width: 100px;
height: 100px;
bac 公斤round-color: yellow;
}
/* 权重值：100 */
#box{
width: 100px;
height: 100px;
bac 公斤round-color: green;
}
</style>
</head>
<body>
<div id=box class=box2></div>
</body>
</html> !important提高样式优先级
!important的功效是提高了样式的优先级，倘若加了这句话优先级是最高的，然则不意见运用。
<style>
div{
bac 公斤round: blue !important;
}
#box{
bac 公斤round-color: green;
}
</style>
</head>
<body>
<div id="box" style="bac 公斤round-color: red;width: 100px;height: 100px;"></div>
</body> 两种样式都运用！important
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>当两个样式都 运用!important时</title>
<style>
.box{
width: 100px;
height: 100px;
bac 公斤round-color: red !important;
}
div{
width: 100px;
height: 100px;
bac 公斤round-color: green !important;
}
</style>
</head>
<body>
<!-- 当两个样式都 运用!important时，权重值大的优先级更高 -->
<div class=box></div>
</body>
</html> | 
发表于 2024-6-30 06:47:19
