CSS样式优先级

最新推荐文章于 2024-12-02 17:38:34 发布

原创最新推荐文章于 2024-12-02 17:38:34 发布 · 484 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

前端学习专栏收录该内容

7 篇文章

订阅专栏

CSS样式优先级

1.先看选择器是不是作用在目标标签上，选中非目标元素的情况下，离目标越近者优先

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式应用于非目标标签时</title>
		<style>
			div p{color: red};
			#box{color: blue}//权重高   但离目标标签远
		</style>
	</head>
	<body>
		<!-- 选中非目标元素的情况下，离目标越近者优先 -->
		<div id="box">
		  <p>
		    <span>神来之笔</span>
		  </p>
		</div>
	</body>
</html>

2.都是作用在目标标签就看权重

权重： 一个!important+10000，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器或者伪元素+1，通配符+0。*

附:（最终权重值是相当于每个属性而言的）

3.都是作用在目标标签并且权重相同就看谁离得近

例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>权重相等的情况下</title>
		<style>
			/* 权重值：201 */
			#box #box2 p{
				width: 200px;			/* 权重值：201 */
				height: 200px;			/* 权重值：201 */
				background-color: red;			/* 权重值：201 */
			}
			/* 权重值：201,离目标最近 */
			#box #box3 p{
				width: 200px;			/* 权重值：201 */
				height: 200px;			/* 权重值：201 */
				background-color: yellow;			/* 权重值：201 */
			}
		</style>
	</head>
	<body>
		<!-- 同等权重下,靠近目标的优先 -->
		<div id="box" class="boxs">
			<div id="box2" class="boxs2">
		    	        <div id="box3" class="boxs3">
		      		        <p></p>
		    	        </div>
		 	</div>
		</div>
	</body>
</html>

附：内联样式、外联样式其实优先级相同，如果上面3条都相同就按css规则后写的生效

总结

常用选择器权重优先级：*!important > id > class > tag*
!important可以提升样式优先级，但不建议使用。如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被应用上!important。例如：background: blue !important;
如果两条样式都使用!important，则权重值高的优先级更高
在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的
样式指向同一元素，权重规则生效，权重大的被应用
样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用
样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用