javascript - 将框旋转 180 度应该会改变背景颜色但失败了。漏洞？

Question

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>

上面的代码的工作原理是它确实旋转了盒子，有趣的是在翻转时甚至将字体颜色设置为绿色，但是，它无法使盒子变成黄色。这是错误吗？

Answer 1

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

如果两个 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 选择器的更多详细信息。作为一个非常基本的入门，这里有一个快速的特异性顺序列表:

1. 类/伪类选择器，例如.wendeBox 或 :focus
2. 标签选择器，例如div
3. ID 选择器，例如#box
4. 复合选择器(以上任意组合)

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