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

文章目录

基础选择器权重
一、权重计算示例 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 p {   
			color: red;
		}
		#id1 {
			color: red;
		}
		p.class2{    
			color: blue;
		}
	</style>
</head>
<body>
	<div id="id1" class="class1">
		<p class="class2">
			权重计算示例
		</p>
	</div>
</body>
</html>

分析文本 " 权重计算示例 " 显示颜色 ;

2、权重分析

权重分析 :

首先判断 p 标签是否被选择出来 , 发现有两个选择器直接将 p 标签选择出来了 , 下面判断两个选择器的权重 ;

div p 选择器由两个标签选择器组合而成 , 权重为 0,0,01 + 0,0,0,1 = 0,0,0 ,2 ;
p.class2 选择器由标签选择器和类选择器组合而成 , 权重为 0,0,01 + 0,0,1,0 = 0,0,1,1 ;

最终选中的样式是 p.class2 选择器的样式 , 文本颜色为蓝色 ;

代码语言：javascript

复制

		div p {   
			color: red;
		}
		p.class2{    
			color: blue;
		}

#id1 选择器选择出了 p 标签的父标签 div 标签 , 继承样式的权重为 0, 0,0,0 , 该权重直接被忽略 ;

代码语言：javascript

复制

		#id1 {
			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">
		.class1 .class2 div{  
			color: blue;
		}
		div #id3 {  
			color: red;
		}
		#id1 div { 
			color: purple;
		}
	</style>
</head>
<body>
	<div id="id1" class="class1">
		<div id="id2" class="class2">
			<div id="id3" class="class3">
				权重计算示例
			</div>
		</div>
	</div>
</body>
</html>

分析文本 " 权重计算示例 " 显示颜色 ;

2、权重分析

权重分析 :

首先判断最内层的 div 标签是否被选择出来 , 发现 3 个选择器全部将最内层的 div 标签选择出来了 ;

下面开始判断 3 个选择器的权重 ;

.class1 .class2 div 选择器权重 = 类选择器权重 0,0,1,0 + 类选择器权重 0,0,1,0 + 标签选择器权重 0,0,0,1 = 0,0,2,1 ;

代码语言：javascript

复制

		.class1 .class2 div{  
			color: blue;
		}

div #id3 选择器权重 = 标签选择器权重 0,0,0,1 + ID 选择器权重 0,1,0,0 = 0,1,0,1 ;

代码语言：javascript

复制

		div #id3 {  
			color: red;
		}

#id1 div 权重 = ID 选择器权重 0,1,0,0 + 标签选择器权重 0,0,0,1 = 0,1,0,1 ;

代码语言：javascript

复制

		#id1 div { 
			color: purple;
		}

最后两个选择器权重相同 , 那么根据就近原则 , 选择最近的样式 ;

这里第三个样式是距离结构最近的样式 , 文本颜色为紫色 ;

3、展示效果

三、权重计算示例 3

1、代码示例

代码示例 :

代码语言：javascript

复制

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>权重计算示例</title>
	<base target="_blank"/>
	<style type="text/css">
		#id1 #id2{ 
			color: blue;
		}
		#id1 p.class2{ 
			color: red;
		}
		div.class1 p.class2{  
			color: purple;
		}
		#id1{
			color: green !important;
		}
	</style>
</head>
<body>
	<div id="id1" class="class1">
		<p id="id2" class="class2">
			权重计算示例
		</p>
	</div>
</body>
</html>

分析文本 " 权重计算示例 " 显示颜色 ;

2、权重分析

权重分析 :

首先判断最内层的 div 标签是否被选择出来 , 发现 3 个选择器全部将最内层的 div 标签选择出来了 ;

代码语言：javascript

复制

		#id1 #id2{ 
			color: blue;
		}
		#id1 p.class2{ 
			color: red;
		}
		div.class1 p.class2{  
			color: purple;
		}

此时开始对比 3 个选择器的权重 :

#id1 #id2 权重 = ID 选择器权重 0,1,0,0 + ID 选择器权重 0,1,0,0 = 0,2,0,0 ;

代码语言：javascript

复制

		#id1 #id2{ 
			color: blue;
		}

#id1 p.class2 权重 = ID 选择器权重 0,1,0,0 + 类选择器权重 0,0,1,0 + 标签选择器权重 0,0,0,1 = 0,1,1,1 ;

代码语言：javascript

复制

		#id1 p.class2{ 
			color: red;
		}

div.class1 p.class2 权重 = 类选择器权重 0,0,1,0 + 标签选择器权重 0,0,0,1 + 类选择器权重 0,0,1,0 + 标签选择器权重 0,0,0,1 = 0,0,2 ,2 ;

代码语言：javascript

复制

		div.class1 p.class2{  
			color: purple;
		}

最终选择第一个选择器的样式 , 文本颜色为蓝色 ;

最后一个选择器 , 虽然有 !important 设置 , 但是该设置针对的是 p 标签的父标签 , 样式继承到 p 标签 , 权重变为 0 了 , 因此该样式被忽略 ;

代码语言：javascript

复制

		#id1{
			color: green !important;
		}

3、展示效果