时间戳

首页 > 解决方案 > 样式顺序的重要性

javascript - 样式顺序的重要性

问题描述

我正在用香草 Javascript 编码。为什么样式的顺序很重要？例如在伪代码中：

<head>
   .show {display: block;}

   .drop {display: none;}
</head>
<body>
   <button id="btn" onclick></button>

   <div id="example" class="drop">
      <p>sample text</p>
   </div>
</body>

<script>
   document.getElementById('btn').onclick = () => {(function(){
      document.getElementById('example').classList.toggle('show');
   })();}
</script>

如果我要执行此代码并按下按钮，它不会显示示例文本，但是，如果我要切换样式的顺序：

<head>
   .drop {display: none;}

   .show {display: block;}
</head>

示例文本将从此顺序出现。两个问题：

  1. 为什么顺序很重要？
  2. 我有一个切换类的按钮，所以顺序无关紧要，因为我只激活按钮和切换方法中的类，对吗？

标签： javascripthtml

解决方案

CSS 代表层叠样式表。按照设计，他们假设您将有多个相互冲突的规则。您需要知道的归结为规则和顺序的特殊性。

在您的情况下，这两个规则具有完全相同的特异性（都只有一个类），因此在这种情况下，后面的规则将优先，因为它是后面的。

但是，如果第一个是两个类，或者一个 id，或者一个类和标签名称等......那么由于更高的特异性，它将优先。

推荐阅读