|
怎样理解CSS的权重，CSS是对样式的修饰，权重表率着某种级别，权重决定了你css规则怎么样被浏览器解析直到生效，css权重关系到你的css规则是怎么样表示的。权重比较时，能够比较权重值，然则亦有例外的状况：多层嵌套时，权重的比较办法有什么区别呢？请看完本文就晓得了，彻底把握CSS权重。
CSS权重规则1
同同样式倘若设置多次（便是一样的属性，然则属性值区别，写在区别的样式表中），权重高的样式会覆盖权重低的样式；
CSS权重规则2
区别的样式区别的选取器，样式效果会进行叠加，例如一个div，行内样式表设置了宽400px，内部样式表设置了高100px，外边样式表设置了背景颜色为blue，那样最后表示为：宽400px，高100px，背景颜色为green的一个长方形。
diveng
南通大学 工学硕士
11271 次赞同
去咨询
<!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>
<!-- ③ 外边样式表 -->
<link rel="stylesheet" href="css/yanse.css">
<!-- ②内部样式表 -->
<style>
div{
height: 100px;
}
</style>
</head>
<body>
<!-- ①行内样式表 -->
<div style="width:400px;></div>
</body>
</html> 外边样式表yanse.css
div{
bac公斤round-color: green;
}
第1步：行内>内部>外边
首要看一下CSS的3种样式表的权重（优先级）：行内>内部>外边
规则：多个样式表修饰同一个元素的时候,思虑的是代码从上向下执行，后面的代码把前面的代码覆盖了，就近原则，谁挨着近实现的是谁的样式。
比较办法
以下为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>
<!-- ③ 外边样式表 -->
<link rel="stylesheet" href="css/waibu.css">
<!-- ②内部样式表 -->
<style>
div{
width:200px;
height: 200px;
bac 公斤round-color: yellow;
}
</style>
</head>
<body>
<!-- ①行内样式表 -->
<!-- style="width:100px;height:100px;bac 公斤round-color:red" -->
<div ></div>
</body>
</html> 以下为外边样式表waibu.css文件
div{
width:300px;
height:300px;
bac公斤r
| 
发表于 2024-6-30 08:24:55
