前言
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学习笔记-选择器权重的叠加
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
