- 请考察以下 CSS 选择器的权重排序。请将下列选择器按权重从高到低排列,并解释排序的原因。请注意,权重的计算遵循CSS优先级规则,包括内联样式、ID 选择器、类/属性/伪类选择器以及标签/伪元素选择器的权重
/* A */
#content .nav a:hover::before
/* B */
body #content .nav > li[data-active="true"] a
/* C */
body #main-container .nav .active > a::before
/* D */
body .nav-container .nav li.active > a::before
/* E */
html body #main-container .nav-container .nav li.active > a::before
- 请同时考虑以下 HTML 结构:
<!DOCTYPE html>
<html>
<head>
<style>
/* ...CSS样式... */
</style>
</head>
<body>
<div id="main-container">
<div id="content">
<div class="nav-container">
<ul class="nav">
<li><a href="#">链接1</a></li>
<li data-active="true" class="active"><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
- 针对此 HTML 结构,如何为
.active
类的<a>
标签应用样式,以确保样式优先级最高?
麒麟哥不知道的答案
根据 CSS 优先级规则,我们可以使用以下四个等级来计算选择器的权重:
- 内联样式(内联): 1,0,0,0
- ID 选择器:0,1,0,0
- 类/属性/伪类选择器:0,0,1,0
- 标签/伪元素选择器:0,0,0,1
现在让我们分析题目中的每个选择器的权重:
/* A */
#content .nav a:hover::before
/* 权重:0,1,2,2(ID选择器1个,类选择器2个,伪类选择器1个,伪元素选择器1个)*/
/* B */
body #content .nav > li[data-active="true"] a
/* 权重:0,1,3,1(ID选择器1个,类选择器1个,属性选择器1个,标签选择器3个)*/
/* C */
body #main-container .nav .active > a::before
/* 权重:0,1,2,3(ID选择器1个,类选择器2个,标签选择器2个,伪元素选择器1个)*/
/* D */
body .nav-container .nav li.active > a::before
/* 权重:0,0,3,4(类选择器3个,标签选择器3个,伪元素选择器1个)*/
/* E */
html body #main-container .nav-container .nav li.active > a::before
/* 权重:0,1,2,4(ID选择器1个,类选择器2个,标签选择器4个,伪元素选择器1个)*/
按照权重从高到低排列,选择器的顺序为:B > E > C > A > D。
针对 HTML 结构中的 .active
类的 <a>
标签,要确保样式优先级最高,可以使用一个 ID 选择器和更多的类选择器。例如:
#main-container .nav-container .nav li.active.extra-class > a
/* 权重:0,1,4,2(ID选择器1个,类选择器4个,标签选择器2个)*/
- 这将使得新添加的选择器具有更高的权重,从而确保
.active
类的<a>
标签的样式优先级最高。
原文链接:https://juejin.cn/post/7232239024106258491 作者:2002XiaoYu