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

Question

一个元素上可能有多个类，由空格分隔：

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

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

例子

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

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

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

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

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

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

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

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

score 4 · Accepted Answer

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

.contaminated .header { ... }

这有什么问题吗？

干杯

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

1

.contaminated>.header{}

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

于 2012-05-15T17:39:57.107 回答

3 回答 3