Question

我正在使用原始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>

示例文本将按此顺序显示。两个问题：

订单为何重要？
我有一个用于切换类的按钮，所以顺序无关紧要，因为我只是在按钮内激活类并向右切换方法？

Answer 1

CSS代表级联样式表。根据设计，他们假设您将有多个相互冲突的规则。您需要了解的只是规则和顺序的specificity。

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

但是，如果第一个是两个类，一个id或一个类和标记名等，则由于具有更高的特异性，它将优先。

Answer 2

Css和JavaScript非常相似。如果以后再写，它将覆盖先前的值

JavaScript

let myNumber = 5;
myNumber = 10;

console.log(myNumber); // 10

与CSS相同的应用

CSS

.show {display: block;}

.drop {display: none;}

如果在同一元素上进行显示和放置，则它将通过css文件并找到.show，设置元素样式display:block，然后在其后将找到.drop并设置元素样式display:none。

您可以使用!important覆盖此顺序，但是使用!important通常是其他错误消息的征兆。

样式顺序的重要性

2 个答案: