CSS选择器的优先级的计算方法以及特殊情景分析【精华版】

最新推荐文章于 2021-08-03 21:11:24 发布

八了个戒

最新推荐文章于 2021-08-03 21:11:24 发布

阅读量248

点赞数

分类专栏： Web技术分享面试宝典文章标签： css html html5 css3

本文链接：https://blog.csdn.net/XH_jing/article/details/112777360

版权

面试宝典同时被 2 个专栏收录

31 篇文章 13 订阅

订阅专栏

Web技术分享

22 篇文章 2 订阅

订阅专栏

最近在整理关于 CSS 的面试题，不免就会涉及到 css 的选择器的相关问题，所以就拿出来单独分析一下，特此整理，不论是在实际开发中还是面试中，都是非常有用的，希望可以帮助到大家。
2021 最新最全的前端面试题集锦之 CSS 篇。

一、CSS优先级比较

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

二、CSS权重值计算

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

等级定义如下：

第一等：代表内联样式，如: style=""，权值为 1000。
第二等：代表ID选择器，如：#id，权值为 0100。
第三等：代表类，伪类和属性选择器，如.class，权值为 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：权重相同的两个样式都映射到一个标签，哪一个会被覆盖呢？

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

<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        #div1 .div2 {
            color: aqua;
            font-weight: 900;
        }
        // 最终显示样式:
        #div1 .div2 {
            color: red;
            font-weight: 100;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div class="div2">
            内容
        </div>
    </div>
</body>
</html>

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

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

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

<!DOCTYPE html>
<head>
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    // 最终显示样式:
    <style>
        #div1 .div2 {
            color: aqua;
            font-weight: 900;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div class="div2">
            内容
        </div>
    </div>
</body>
</html>

css/style.css 里面的内容如下：

#div1 .div2{
	color: red;
	font-weight: 100;
}

最终会执行 <style> 里的样式，如果 <link > 在 <style> 后面，则会执行 <link > 里面的样式。

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

<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        #div1 .div2 {
            color: aqua;
            font-weight: 900;
        }
        #div1 .div4 {
            color: red;
            font-weight: 900;
        }
    	// 最终显示样式:
        #div1 .div3 {
            color: yellow;
            font-weight: 900;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div class="div2 div3 div4">
            内容
        </div>
    </div>
</body>
</html>

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

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

<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        #div1 .div2 {
            color: aqua;
            font-weight: 900;
            width: 100px;
            height: 100px;
        }
        #div1 .div3 {
            color: red;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div class="div2 div3">
            内容
        </div>
    </div>
</body>
</html>

权重相同的基础下，后面写的样式覆盖前面的对应的全部样式，如上，最终样式为：
在这里插入图片描述

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

<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        #div1 .div2 p{
            color: aqua;
            font-size: 14px;
        }
        #div1 .div4 p{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div class="div2">
            <div class="div3">
                <div class="div4">
                    <p>内容</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

跳级不影响，主要看权重和先后顺序。
在这里插入图片描述

问题6：内联样式的权重为 `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;"。

所以，当10个id选择器和1个style内联样式在一块时，优先解析的是style内联样式，并不会出现所谓的10个id选择器大于style内联样式的问题。

希望以上内容可以帮助到对css选择器仍有困惑的小伙伴，如果大家还在上岸的过程中，可以关注一下 2021 最新最全的前端面试题集锦系列哦。

以上内容大部分转载至：https://blog.csdn.net/xiaojinguniang/article/details/82869841，感谢原作者，如有侵权，请联系删除。

八了个戒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器的优先级的计算方法以及特殊情景分析【精华版】

最近在整理关于 CSS 的面试题，不免就会涉及到 css 的选择器的相关问题，所以就拿出来单独分析一下，特此整理，不论是在实际开发中还是面试中，都是非常有用的，希望可以帮助到大家。2021 最新最全的前端面试题集锦之 CSS 篇。一、CSS优先级比较!important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认二、CSS权重值计算我们把特殊性分为五个等级，每.
复制链接

扫一扫