代码之家 › 专栏 › 技术社区 › ftravers

影响父样式的CSS元素样式

css html

ftravers · 技术社区 · 7 年前

我有一个 <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小提琴,显示它:

3 回复 | 直到 7 年前

infused 7 年前

删除.tab后面的逗号:

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

用逗号,它意味着将.tab类和button.active的背景色设置为蓝色。

Anonymous 7 年前

这个 .tab 元素获取蓝色背景,因为您在 标签 和 button.active 定义它们的样式时。

在此上下文中,逗号意味着应用于这两个元素。

Oscar W 7 年前

这是因为您在列出CSS元素,而不是使用选择器。以下是CSS的外观。

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

注意我在 > 选择器

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前