交换内部 css 位置时，使用 css 和 javascript 的下拉菜单不起作用答案

【问题标题】：Dropdown using css and javascript not working when internal css position is swapped交换内部 css 位置时，使用 css 和 javascript 的下拉菜单不起作用
【发布时间】：2016-08-31 11:35:29
【问题描述】：

这行得通

 .c1
  {
  background-color:red;
   position:relative;
  }
  .c2
  {
  background-color:blue;
  position:absolute;
  height:50px;
  width:100px;
   display:none;}

.show
{
 display:block;
 }

<body>
<button  class="c1" onclick="myfunction()">click</button>
<div id="change" class="c2">drop </div>

<script>
function myfunction(){
document.getElementById("change").classList.toggle("show")
}
 </script>

但是交换.show和.c2，不行。

.c1
{
background-color:red;
position:relative;
}
  .show
{
 display:block;
 }

 .c2
{
background-color:blue;
position:absolute;
height:50px;
width:100px;
display:none;}



<body>
<button  class="c1" onclick="myfunction()">click</button>
<div id="change" class="c2">drop </div>

<script>
function myfunction(){
document.getElementById("change").classList.toggle("show")
}
 </script>

这可能是因为我使用了 classList.toggle。
它将分区的显示从无更改为块。唯一的代码更改是 .c2 类和 .show 类的位置。 css 类的顺序有关系吗？

【问题讨论】：

标签： javascript css

【解决方案1】：

也许第一眼看起来很奇怪，但如果你想想 css 是如何对声明进行排序的，这实际上是很合乎逻辑的，这就是所谓的特异性。对于每个前端开发人员来说，至少阅读一次优秀而广泛的guide at MDN 是一件好事。

来自指南：

特异性是浏览器决定哪些 CSS 属性值与元素最相关并因此将被应用的方法。特异性基于由不同种类的 CSS 选择器组成的匹配规则。

例如，文档底部下方的声明具有更高的优先级，这些声明将被应用。例如，如果您有以下声明，您的背景将为蓝色。

body { background: red; }
...
body { background: blue; }

但你越具体，它就越重要，并且会应用更具体的声明。所以虽然一开始有点违反直觉，但你的背景下面的代码实际上是红色的：

html body { background: red; }
...
body { background: blue; }

回到你的例子：一个类.show的元素应该显示为一个块元素，但是如果你有那个类的声明之前另一个类的声明应用于相同的元素（在这种情况下为.c2），它将被覆盖。但是，您可以通过更具体的方式覆盖它：

.c2.show { display: block; }
.c2 { display: none; }

<div class="c2"><!-- This element is hidden --></div>
<div class="c2 show"><!-- This element is shown --></div>

您应该尽可能避免使用!important，因为它有时会让人不清楚为什么要应用 css 声明，并且更难以覆盖它。基本上，它几乎没有必要。

【讨论】：

不，你不应该使用 w3schools ......他们有很好的 seo，但有时会出错，几乎永远不会完成。您可以更好地使用 MDN 作为参考，并使用 csstricks 之类的网站来获取示例和想法

【解决方案2】：

.show 和 .c2 有一个冲突的 display 属性。浏览器会考虑在样式中找到的最后一个值（自上而下）。

试试

.show{
display:block!important;
}

这将覆盖 c2 的值

【讨论】：

请不要使用!important。好的快速修复，但尝试环绕代码以避免使用它。进一步阅读：james.padolsey.com/css/dont-use-important
我在生产环境中经常使用 !important。有时您无法控制 CSS 类的组合方式，尤其是在您使用 JS UI 库时