CSS在父类和子类之间继承答案

【问题标题】：CSS inherit between parent and child classCSS在父类和子类之间继承
【发布时间】：2019-03-16 16:52:27
【问题描述】：

我正在寻找一些代码改进，我想知道一些事情。我有这个代码结构：

<div class="container exports">
    <div class="row">
      <form>
        <fieldset>
          <legend class="title">Export to .csv files</legend>
              ...
        </fieldset>
      </form>
    </div>
</div>

我想将默认以白色定义的图例颜色更改为黑色。但我不想影响其他传奇。

所以在我的 css 代码中，我有这个：

legend {
    color: black;
}

它会改变所有图例的颜色。

但是当我写这个时：

.exports legend.title {
    color: black;
}

它不适用于我的黑色特定图例。

为什么？

【问题讨论】：

您问题中的代码按预期工作：jsfiddle.net/3rror404/y4xfek52/1/Use your browsers developer tools to view the styles that are applied to the element。

标签： css

【解决方案1】：

对我来说，您的代码应该可以工作（蓝色示例）。

您必须具有覆盖此属性的另一个属性。你能检查一下吗？

.exports legend.title {
    color: blue;
}

<div class="container exports">
    <div class="row">
      <form>
        <fieldset>
          <legend class="title">Export to .csv files</legend>
              ...
        </fieldset>
      </form>
    </div>
</div>

【讨论】：

它不起作用。图例是在我项目的全局引导库中定义的。但是在本地，我想做一些改变。
您是否检查过，正如我所说（使用调试工具）没有其他属性覆盖这个？
我怎样才能让我的超越别人？
正如 Marco 所说，您应该更精确地选择您的选择器，或者您可以将您的 CSS 放在其他人之后。我不会告诉你使用“！important”，最好找到一种干净的方法来做到这一点。（见developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…）

【解决方案2】：

你说的可能是一个错误

.exports legend.title { color: black; }

在一般图例颜色规范或其他 css 文件覆盖它之前... 你有两种方法：

将您的特定图例颜色放在通用颜色之后，或者在您的之后引用错误的 css
使用!important覆盖所有规则（我不推荐这种方式，因为每次你想覆盖该规则，你必须再次使用!important）：

.exports legend.title { color: black !important; }

【讨论】：

【解决方案3】：

我试过这个方法。 .exports legend.title{ color:#ff0000;} 它对我有用。

.exports legend.title{ color:#ff0000;}

<div class="container exports">
    <div class="row">
      <form>
        <fieldset>
          <legend class="title">Export to .csv files</legend>
              ...
        </fieldset>
        
        <fieldset>
          <legend class="">Export to .csv files</legend>
              ...
        </fieldset>
      </form>
    </div>
</div>

【讨论】：

这里同样适用于给定的代码。问题似乎出在其他地方。
还有其他样式覆盖这个样式吗？
不知道我们帮不了他.. :)