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

Question

一个元素上可以有多个类，用空格分隔:

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

你可以target that div using .header.contaminated selector .

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

示例

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

通常我想将 header 样式设置为蓝色:

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

但是，如果 div 被污染，那么我会将整个背景涂成红色:

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

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

Note: The reason i don't think it's valid is because it doesn't work

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

jsFiddle sandbox

Answer 1

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

.contaminated .header { ... }

有什么问题吗？

干杯