CSS权重问题-2023_05_04

  • 请考察以下 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. 内联样式(内联): 1,0,0,0
  2. ID 选择器:0,1,0,0
  3. 类/属性/伪类选择器:0,0,1,0
  4. 标签/伪元素选择器: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

(0)
上一篇 2023年5月13日 上午10:51
下一篇 2023年5月13日 上午11:01

相关推荐

发表评论

登录后才能评论