Question

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

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

它不会将我的特定图例应用为黑色。

为什么？

Answer 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>

Answer 2

一个可能的错误可能是你在说

.exports legend.title { color: black; }

在一般图例颜色规范或另一个CSS文件覆盖它之前... 您有两种方法：

将特定的图例颜色放在通用颜色之后，或在您的颜色之后引用错误的css
使用!important覆盖所有规则（我不建议这样做，因为每次要覆盖该规则时，都必须再次使用!important）：

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

Answer 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>

CSS在父类和子类之间继承

3 个答案: