文章目录
- 基础选择器权重
- 一、权重计算示例 1
- 1、代码示例
- 2、权重分析
- 3、展示效果
- 二、权重计算示例 2
- 1、代码示例
- 2、权重分析
- 3、展示效果
- 三、权重计算示例 3
- 1、代码示例
- 2、权重分析
- 3、展示效果
基础选择器权重
基础选择器 权重 :
CSS 选择器 | 选择器优先级 - 权重计算 |
继承父标签的样式 , | 0,0,0,0 |
标签选择器 | 0,0,0,1 |
类选择器，链接伪类选择器 | 0,0,1,0 |
ID 选择器 | 0,1,0,0 |
标签的行内样式 | 1,0,0,0 |
样式后添加 | 权重无穷大 |
判定标签样式的时候 , 首先看标签有没有被选出来 ,
- 如果被选出来 , 则看哪个选择器权值大 , 就应用该选择器的样式 ;
- 如果没有被选出来 , 则权重为 0 ;
一、权重计算示例 1
1、代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>权重计算示例</title>
<base target="_blank"/>
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
权重计算示例
</div>
</div>
</div>
</body>
</html>
2、权重分析
权重分析 : 两个选择器 都可以选中最内层的 div 标签 ;
上面 包含文字的 div 标签 , 同时被 两个选择器 选中 , 那么此时就 判定哪个选择器的权重大 , 就选择哪个选择器 ;
下面的是一个 后代选择器 , 需要将两个 标签选择器 的权重 叠加 ,
div div 后代选择器 权重 = 标签选择器权重 0,0,0,1 + 标签选择器权重 0,0,0,1 = 0,0,0,2 ;
div div{
color:blue;
}div 标签选择器 的权重是 0,0,0,1 ;
div{
color:red;
}
3、展示效果
显示效果 :
二、权重计算示例 2
1、代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>权重计算示例</title>
<base target="_blank"/>
<style type="text/css">
#nav{
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<div id="nav">
<p>权重计算示例</p>
</div>
</body>
</html>
2、权重分析
权重分析 : 分析 <p>权重计算示例</p> 标签的样式 ;
#nav 是标签选择器 , 选择的是 div 标签 , 作用到 p 标签后 , 继承权重为 0,0,0,0 ;
#nav{
color: blue;
}p 标签选择器 , 权重为 0,0,0,1 ; 该权重大于继承权重 , 最最终样式 ;
p {
color: red;
}因此 , 文本颜色为红色 ;
3、展示效果
显示样式 :
三、权重计算示例 3
1、代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>权重计算示例</title>
<base target="_blank"/>
<style type="text/css">
div div div div div{
color: blue;
}
.nav {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div class="nav">权重计算示例</div>
</div>
</div>
</div>
</div>
</body>
</html>
2、权重分析
权重分析 : 分析 <p>权重计算示例</p> 标签的样式 ;
下面的 后代选择器 都是 div 标签选择器组合的 , 5 个标签选择器组合后的权重为 0, 0, 0, 5 ;
div div div div div{
color: blue;
}类选择器的权重为 0 , 0 , 1 , 0 ;
.nav {
color: red;
}最终显示的是 类选择器 的样式 , 文本颜色为红色 ;
3、展示效果
展示效果 :
