当存在继承的类时，您可以使用 CSS 定位元素吗？答案

【问题标题】：Can you target an element with CSS when inherited classes are present?当存在继承的类时，您可以使用 CSS 定位元素吗？
【发布时间】：2012-05-16 01:40:09
【问题描述】：

一个元素上可以有多个类，用空格隔开：

<div class="header contaminated">...</div>

当两个类都直接应用于一个元素时，这很好。我想定位一个具有两种样式的 CSS 元素，但一种样式来自 parent：

示例

<div class="contaminated">
  <div class="header">...</div>
</div>

通常我想将header 设置为蓝色：

.header { background-color:  #99FFFF; }

但如果div 是contaminated，那么我将整个背景涂成红色：

.contaminated { background-color: Pink; }
.contaminated.header { background-color: HotPink; }

除了我不认为 css 选择器语法 .contaminated.header 对“继承”样式有效。

注意：我认为它无效的原因是它不起作用

如果一个元素只包含两个类，并且其中一些类是“继承的”，是否可以使用 CSS 定位它？

【问题讨论】：

【解决方案1】：

这是基本的 CSS - 用空格分隔类名，这意味着/应用级联：

.contaminated .header { ... }

这有什么问题吗？

干杯

【讨论】：

【解决方案2】：

我对你的问题感到困惑，这不是吗？

.contaminated .header { background-color: HotPink; }

注意空格，上面写着“在具有 .contaminated 类的元素中查找具有 .header 类的元素”

【讨论】：

【解决方案3】：

.contaminated>.header{}

只会针对 .contaminated 的直接子元素标头

【讨论】：