Question

我理解CSS基础知识，但是我一直遇到有冲突风格的问题。请考虑以下样式。

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

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

现在Cool系列中的所有字幕都有棕色文字。但是在某些情况下我希望字幕有黑色背景和白色文字，所以我创建了这个规则：

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

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

<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;
}

Answer 2

你可以尝试：

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

Answer 3

有一些修复，但如前所述，您应该使用!important标记要覆盖之前的所有设置。有了它，您的代码将如下所示：

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

此外，不确定您是否提出此问题，但您可以使用CSS将*应用于所有组件，如下所示：

* {
    //blahblahblah
}

Answer 4

你正在定义第一个带有后代选择器的情况，它会覆盖第二个类，它只是一个类。已经给出的每个答案都将工作但完全没必要。只需将其添加到样式表中：

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

/** you could also chain your classes for specificity power **/  
.Black.Caption{color:#fff}

应该这样做。你可以在这里阅读更多关于选择器的信息：
http://docs.webplatform.org/wiki/css/selectors

Answer 5

我认为通常更具体的规则会覆盖更普遍的规则，因此更具体的“.CoolR .Caption”会覆盖更为通用的.Black。你可能可以用!important覆盖它，但更好的风格可能是降低规则的复杂性：

.Cool .caption { color: #900; }

.Cool .caption.black { color: background: #000; color: #fff; }

将.L和.R放在不同的类

中

.Cool.L { . . . } /*针对特定于CoolL的内容，而非CoolR */

.Cool.R { . . . } /* and vice-versa * /

对覆盖CSS样式感到困惑

5 个答案: