CSS优先级及其计算方法

最新推荐文章于 2025-07-18 14:52:51 发布

小瑾沐晚风

最新推荐文章于 2025-07-18 14:52:51 发布

阅读量4.5k

点赞数 6

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xiaojinguniang/article/details/82869841

1.CSS优先级比较

！important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认

2.CSS权重计算

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下：

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。
第五等：通用选择器（*），子选择器（>），相邻同胞选择器（+），权值为0000

下面是一些计算示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        #username{/*权重：100*1=100*/
            font-size: 14px;
            color: #333333;
        }
        #users_info #username{/*权重：100*2=200*/
            font-size: 15px;
            color: #1B6D85;
        }
        #users_info a{/*权重：100*1+1=101*/
            font-size: 16px;
            color: #398439;
        }
        .user_info #username{/*权重：100*1+10*1=110*/
            font-size: 17px;
            color: #66512C;
        }
        .user_info a{/*权重：10*1+1*1=11*/
            font-size: 18px;
            color: #843534;
        }
        #in_block .user_info #username{/*权重：100*2+10*1=210*/
            font-size: 19px;
            color: #8A6D3B;
        }
        .contain #in_block .user_info #username{/*权重：100*2+10*2=220*/
            font-size: 20px;
            color: #C7254E;
        }
        #content #in_block .user_info a{/*权重：100*2+10*1+1*1=211*/
            font-size: 21px;
            color: #F0AD4E;
        }
    </style>
    <body>
        <div class="contain" id="content" style="width: 200px;height: 200px;margin: 0 auto;background: #C4E3F3;">
            <div id="in_block" class="left_content">
                <div class="user_info" id="users_info">
                    <a id="username">注意我的字体大小和颜色</a>
                </div>
            </div>
        </div>
    </body>
</html>

问题分析

问题1：权重相同的两个样式都映射到一个标签，哪一个会被覆盖呢？

这就是除去权重后的又一个影响因素了，权重相同就和你的书写顺序有关了，写在前面的会被后面的覆盖，如下：

权重相同，后面的样式会覆盖掉前面的，所以最后显示的样式为color: yellow;font-weight: 100;

2.权重相同，一个样式定义在html中一个定义在css文件中，哪一个会被覆盖呢？

最终显示样式会和你的引入顺序有关。所以你的引入顺序决定了你的样式，如下：

css里面的文件如下：

#div1 .div2{
	color: yellow;
	font-weight: 300;
}

最终的显示样式为：color: red; font-weight: 900;

如果因为文件的顺序如下：

那么最后的样式为css/new_file.css文件下所定义的样式：color: yellow; font-weight: 900;

问题3：同一个标签有多个类名来修饰，类名的先后顺序对样式有影响吗？

结论：类名的先后顺序不影响样式，主要看权重和顺序。如果在权重相同的前提下，后面写的样式会覆盖掉前面的样式，所以上述样式的最终结果是color:pink;

问题3：权重相同的基础下，后面写的样式覆盖前面的对应的全部样式还是全部替换为后面写的样式？

结果：权重相同的基础下，后面写的样式覆盖前面的对应的全部样式，如上，最终样式为：

color: blue;width: 100px; height: 100；border:1px solid #CCCCCC;

问题4：跳级引用，跳过标签的缩少对样式有影响吗？

结论：跳级不影响，主要看权重和先后顺序。

最后的显示j结果为color: pink;
font-size: 20px;
background-color: orange;

问题五：内联样式的权重为1000，10个id选择器的权重也为1000，结果为什么？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/new_file.css" />
		<style>
			#div1 #div2 #div3 #div4 #div5 #div6 #div7 #div8 #div9 #div10 #div11 #div12 a{  /*权重为1201*/
				color: yellow;
				font-size: 50px;
			}
		</style>	
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">
					<div id="div4">
						<div id="div5">
							<div id="div6">
								<div id="div7">
									<div id="div8">
										<div id="div9">
											<div id="div10">
												<div id="div11">
													<div id="div12">
														<a href="" style="color: pink;font-size: 20px;">湘潭大学</a>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
					   </div>	
					</div>
			    </div>	
			</div>	
		</div>
	</body>
</html>

结论：虽然最后权重达到了1201，但是显示结果依然为内联样式的样式，即style="color: pink;font-size: 20px;"