css - 对覆盖 CSS 样式感到困惑

Question

我了解 CSS 基础知识，但我总是遇到样式冲突的问题。考虑以下样式。

首先，我的样式表中的默认字体颜色是黑色。我希望将该颜色应用于所有图片标题 - 除非它们包含在类为 CoolL 或 CoolR 的 div 中...

.CoolL .Caption, .CoolR .Caption { color: #900; }

现在 Cool 系列中的所有字幕都是棕色文本。但在某些情况下，我希望字幕具有黑色背景和白色文本，因此我制定了这条规则:

.Black { background: #000; color: #fff; }

现在考虑以下 HTML。类标题本身应该有黑色文本。但是，这是在具有类 CoolR 的 div 中，因此它显示棕色文本。但是我在最后一个 div 中添加了 Black 类，这应该将背景更改为黑色，将文本颜色更改为白色...

<div class="CoolR Plus Max300">
  <div class="Shadow2">
    <img src="">
    <div class="Caption Black">Text</div>
  </div>
</div>

其实背景显示的是黑色，但是文字颜色还是棕色。

我总是遇到这些问题，解决它们的唯一方法就是编写长而详细的样式，就像这样...

.Black, .Caption .Black, .CoolR .Caption.Black, .EverythingElseThatCouldBeBlack .Black { background: #000; color: #fff; }

我错过了什么？谢谢。

Answer 1

我认为你把事情复杂化了。当您添加更多样式时，这将成为维护问题。我会定义单独的类并保持简单。了解 CSS 特异性也很重要。

.caption {
  color: #000;
}

.cool-caption {
  color: #900;
}

.caption-with-background {
  background-color: #000;
  color: #fff;
}