- CSS权重的叠加:如果是复合选择器,则会有权重叠加,需要计算权重,就是把各权重累加。
- 权重尽管有叠加,但不会有进位。
权重叠加计算举例:
div ul li
选择器叠加后的权重为0,0,0,1 + 0,0,0,1 + 0,0,0,1 = 0,0,0,3.nav ul li
选择器叠加后的权重为0,0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2a:hover
选择器叠加后的权重为0,0,0,1 + 0,0,1,0 = 0,0,1,1.nav a
选择器叠加后的权重为0,0,1,0 + 0,0,0,1 = 0,0,1,1
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 复合选择器会有权重叠加的问题 */
/* ul li选择器器的权重为 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
ul li {
color: green;
}
/* li的权重是0,0,0,1 */
li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>苹果</li>
<li>西瓜</li>
<li>荔枝</li>
</ul>
</body>
</html>
展示效果:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 复合选择器会有权重叠加的问题 */
/* ul li选择器器的权重为 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
ul li {
color: green;
}
/* li的权重是0,0,0,1 */
li {
color: red;
}
/* .nav li选择器的权重为0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>苹果</li>
<li>西瓜</li>
<li>荔枝</li>
</ul>
</body>
</html>
展示效果: