将盒子旋转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源代码中声明的规则将获胜。

Answer 2

对background-color: yellow !important;添加了重要的内容background-color: yellow !important; 因为#box已将背景色值设置为蓝色

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

 .wendeBox{ width: 100px; height: 100px; margin: 50px; background-color: yellow !important; 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 3

您所拥有的是CSS 特异性 。

一个id会渲染一个类。 您需要做的就是更改CSS，以便您在类中引用ID。

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

 #box.wendeBox{ background-color: yellow; color: green; transform: rotateY(180deg); } #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 4

尝试对黄色使用!important ，就像在background-color: yellow !important; 以便强加黄色。

但是请注意，使用!important并非总是好的习惯