影响父样式的css元素样式

Question

我有一个<div>，其中包含一个<button>。每个都有自己的类。在每个类的样式中，我指定background-color属性。出于某种原因，子按钮会覆盖父属性。

.tab {
  background-color: red;
}

.tab,
button.active {
  background-color: blue;
}

<div class="tab">
  <button>My Button</button>
  <button class="active">button 2</button>
</div>

下面是显示它的JS小提琴：

https://jsfiddle.net/jp3kbfwn/

Answer 1

在.tab之后删除逗号：

.tab button.active {
    background-color: blue;
}

用逗号表示将.tab类和button.active的背景色都设置为蓝色。

Answer 2

这是因为您要列出CSS元素，而不是使用选择器。这是CSS的外观。

<style>
.tab {
    background-color: red;
}
.tab > button.active {
    background-color: blue;
}
</style>

请注意我是如何添加到>选择器中的

Answer 3

.tab元素的背景为蓝色，因为在定义样式时，您在.tab和button.active之间使用逗号。

在此上下文中，逗号表示同时适用于这两个元素。