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

Question

您可以在元素上使用空格分隔多个类：

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

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

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

示例

<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来定位元素？

jsFiddle sandbox

Answer 1

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

.contaminated .header { ... }

有什么问题吗？

干杯

Answer 2

我对你的问题感到困惑，不会这样做吗？

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

注意空格，说“在一个带有.contaminated类的元素中查找带有.header类的元素”

Answer 3

.contaminated>.header{}

将仅定位作为.contaminated

的直接子元素的元素标头