【CSS】CSS 特性 ⑤ ( CSS 优先级 | 经典权重计算示例 1 )

文章目录

  • 基础选择器权重
  • 一、权重计算示例 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

标签的行内样式 style 属性

1,0,0,0

样式后添加 !important

权重无穷大

判定标签样式的时候 , 首先看标签有没有被选出来 ,

  • 如果被选出来 , 则看哪个选择器权值大 , 就应用该选择器的样式 ;
  • 如果没有被选出来 , 则权重为 0 ;

一、权重计算示例 1


1、代码示例

代码示例 :

代码语言:javascript
复制
<!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 ;

代码语言:javascript
复制
			div div{ 
				color:blue;
			}

div 标签选择器 的权重是 0,0,0,1 ;

代码语言:javascript
复制
			div{
				color:red;
			}

3、展示效果

显示效果 :

在这里插入图片描述

二、权重计算示例 2


1、代码示例

代码示例 :

代码语言:javascript
复制
<!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 ;

代码语言:javascript
复制
		#nav{
			color: blue;
		}

p 标签选择器 , 权重为 0,0,0,1 ; 该权重大于继承权重 , 最最终样式 ;

代码语言:javascript
复制
		p {
			color: red;  
		}

因此 , 文本颜色为红色 ;

3、展示效果

显示样式 :

在这里插入图片描述

三、权重计算示例 3


1、代码示例

代码示例 :

代码语言:javascript
复制
<!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 ;

代码语言:javascript
复制
		div div div div div{    
			color: blue;
		}

类选择器的权重为 0 , 0 , 1 , 0 ;

代码语言:javascript
复制
		.nav {  
			color: red;
		}

最终显示的是 类选择器 的样式 , 文本颜色为红色 ;

3、展示效果

展示效果 :

在这里插入图片描述