Question

我在这里制作了一个蓝色的盒子。然后应用了一个绿色类，盒子保持蓝色。这是为什么？

<div class='box green'>

</div>

.box{
  height: 50px;
  width: 100px;

  background-color: blue;
}

.box .green {
  background-color: green;
}

为什么盒子不是绿色的？

Answer 1

因为您试图定位.box .green，这是一个.green类的元素，.box是孩子 .box .green。成功更改.green { height: 50px; width: 100px; background-color: blue; } .box .green { background-color: green; }在以下代码段中进行了演示，其中添加了一个子项：

＆＃13;

<div class='box'>
  <div class='green'></div>
</div>

＆＃13;

.box {
  height: 50px;
  width: 100px;
  background-color: blue;
}

.box.green {
  background-color: green;
}

＆＃13;

为了在同一个元素上定位两个不同的类，你不需要在两个类选择器之间放置一个空格：

＆＃13;

<div class='box green'></div>

＆＃13;

{{1}}

＆＃13;

希望这有帮助！：）

为什么我的CSS盒子没有改变颜色？

1 个答案: