5.css权重

最新推荐文章于 2025-03-11 10:58:57 发布

原创最新推荐文章于 2025-03-11 10:58:57 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

13 篇文章

订阅专栏

本文详细解析了CSS中不同选择器的权重计算方法，通过多个实例展示了ID、类、标签和行内样式的具体权重，并解释了权重相同情况下的就近原则。

当我们的网页上有多个选择器冲突时,就需要比较他们的权重来决定使用哪个

权重
继承或*	0,0,0,0
每个元素(标签)	0,0,0,1
每个类或伪类	0,0,1,0
每个id	0,1,0,0
每个行内样式	1,0,0,0
每个!important	无穷大

当权重一样时采用就近原则

一


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>例题一</title>
<style type="text/css">
	#father #son{/*0,2,0,0*/
		color:green;
	}
	#father p.c2{/*0,1,1,1*/
		color:bule;
	}
	div.c1 p.c2{/*0,0,2,2*/
		color:red;	
	}
	#father{/*0,1,0,0*/
		color:yellow;
	}
</style>
</head>

<body>
	<div id="father" class="c1">
    	<p id="son" class="c2">
        	样式
        </p>
    </div>
</body>
</html>

二


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>例题三</title>
<style type="text/css">
	p{		/*0,0,0,1*/
		color:red;	
	}
	#father{/*0,1,0,0*/
		color:yellow;
	}
</style>
</head>

<body>
<div id="father">
	<p>样式</p>
</div>
<!--继承比重为0,所以虽然继承了div的黄色(0,0,0,0),但在与本身标签选择器冲突时,元素标签的权重更高,所以为红色(0,0,0,1)-->
</body>
</html>

三


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>例题三</title>
<style type="text/css">
	div div div div{
		color:red;
	}
	#father{
		color:blue;
	}
	
</style>
</head>

<body>
	<div><div><div><div>
    	<div id="father" >
        	样式1
        </div>
    </div></div></div></div>
    
    
    <div>
    	<div id="father" >
        	样式
        </div>
    </div>
</body>
</html>

四


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>例题一</title>
<style type="text/css">
	div div div div{/*0,2,0,0*/
		color:red;
	}
	div{/*0,1,1,1*/
		color:blue;
	}
	
</style>
</head>

<body>
	<div><div><div><div>
    	<div>
        	样式1
        </div>
    </div></div></div></div>
    
    
    <div>
    	<div id="father" >
        	样式
        </div>
    </div>
</body>
</html>

五


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>例题五</title>
<style type="text/css">
	.c1 .c2 div{
		color:yellow;
	}
	#b1 div{
		color:blue;
	}
	div #b2{
		color:red;
	}
<!--两者权重一致,就近原则-->
	
</style>
</head>

<body>
	<div id="b1" class="c1">
    	<div id="b2" class="c2">
        	样式1
        </div>
    </div>

</body>
</html>

六


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
</body>
</html>