javascript - 将盒子旋转180度应会更改背景颜色，但会失败。 bug ？

function myFunction() {
  var element = document.getElementById("box");
  element.classList.toggle("wendeBox");
}

.wendeBox{
 width: 100px;
 height: 100px;
 margin: 50px;
 background-color: yellow;
 color: green;
 transform: rotateY(180deg);
 transition: 1.3s;
}

#box{
 transition: 1.3s;
 width: 100px;
 height: 100px;
 margin: 50px;
 background-color: blue;
}

<button onclick='myFunction()'>wenden</button>
<div id='box'>Box 1</div>

上面的代码在一定意义上起作用，它确实旋转了框，并且有趣的是，翻转后甚至将字体颜色设置为绿色，但是，它无法使框变黄。这是错误吗？

最佳答案

这不是错误。原因在于您使用的选择器。

如果两个CSS规则具有冲突的属性（在这种情况下为背景色），则具有较高特异性的规则将获胜。在您的情况下，.wendeBox是类选择器，而#box是ID选择器。 ID选择器具有更高的特异性，因此以蓝色背景为准。

要解决您的问题，我建议您执行以下操作：

<button onclick='myFunction()'>wenden</button>
<div id='box'>Box 1</div>

#box{
    transition: 1.3s;
    width: 100px;
    height: 100px;
    margin: 50px;
    background-color: blue;
}
#box.wendeBox {
    background-color: yellow;
    color: green;
    transform: rotateY(180deg);
}

在这里，#box.wendeBox规则具有比.wendeBox更高的特异性，因此它可以覆盖#box规则。

我建议您阅读CSS选择器以获取更多详细信息。作为一个非常基本的入门者，以下是特异性顺序的快速列表：


类/伪类选择器，例如.wendeBox或:focus
标签选择器，例如div
ID选择器，例如#box
复合选择器（以上任意组合）


如果两个规则具有相同的特异性，则稍后在CSS源代码中声明的规则将获胜。

关于javascript - 将盒子旋转180度应会更改背景颜色，但会失败。 bug ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49519617/