对覆盖 CSS 样式感到困惑答案

【问题标题】：Confused about overriding CSS styles对覆盖 CSS 样式感到困惑
【发布时间】：2014-05-09 09:57:48
【问题描述】：

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

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

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

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

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

现在考虑以下 HTML。 Class Caption 本身应该有黑色文本。但是，这是在具有类 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; }

我错过了什么？谢谢。

【问题讨论】：

css-tricks.com/specifics-on-css-specificity
如果您将.Black 声明放在要覆盖的规则下，您提供的示例就可以正常工作。 jsfiddle.net/habTJ/1

标签： css

【解决方案1】：

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

.caption {
  color: #000;
}

.cool-caption {
  color: #900;
}

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

【讨论】：

【解决方案2】：

你可以试试：

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

【讨论】：

你当然可以使用!important，但最好先了解 CSS 的特殊性，然后再盲目地覆盖样式。

【解决方案3】：

有一些修复，但按照之前的建议，您应该使用!important 标记所有要覆盖之前设置的设置。这样，您的代码将如下所示：

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

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

* {
    //blahblahblah
}

【讨论】：

哇，这变成了一场教育讨论！我不确定将哪个标记为正确答案。我选择了 !important（我以前从未听说过），因为我仍然对 CSS 的特殊性感到有些困惑。 !important 似乎是目前唯一对我有用的东西，但我会同时尝试重新组织我的代码。

【解决方案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

【讨论】：

【解决方案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 */

【讨论】：