前言
CSS学习笔记-选择器的权重
一、选择器的权重
选择器 | 选择器权重 |
---|---|
继承 或 * | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内样式style=" " | 1,0,0,0 |
!important | ∞无穷大 |
二、权重的叠加
1.复合选择器有权重叠加的问题
HTML代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器权重的叠加</title>
<style>
/* ul li权重 = 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
/* 权重会叠加,但不会进位; 例如10个元素选择器叠加结果为0,0,0,10 */
ul li{
color: red;
}
/* li权重 = 0,0,0,1 */
li{
color: green;
}
</style>
</head>
<body>
<ul>
<li>鱼香肉丝</li>
<li>红烧肉</li>
<li>松鼠鱼</li>
</ul>
</body>
</html>
2.运行结果
总结
CSS学习笔记-选择器权重的叠加