CSS *重写类样式

Question

我在应用CSS时遇到了一些困难。我在全局外部样式表中指定了文本颜色，它使用*应用该颜色。我现在正试图为一个特定的类重写它。我已经尝试在文档的标题中设置类的文本颜色(如果我正确的话，应该覆盖外部工作表？)，但是颜色不会改变。

Google检查器向我展示了*仍然主导着类规范。有什么想法吗？

我的外部样式表如下所示：

* {
  font-size: 14px;
  color: #666;
 }

我的标题样式是这样的：

.error-list {
   color: red !important;
}

值得一提的是，我已经尝试过了，有和没有！重要。

Answer 1

尝试使您的CSS规则更具体。例如，如果..error list是由li标记组成的。将CSS规则更改为..error list li，使其更加具体。

Answer 2

这一切归结为有更高的https://developer.mozilla.org/en/docs/Web/CSS/Specificity。

在下面的样本中，span和error-list规则具有比*更高的特异性，但是div.error-list甚至比error-list更高，所以即使error-list被放在CSS之后，最高的胜利者(如下面的样本中的第一个div )。

覆盖

​

* {
  font-size: 14px;
  color: #666;
}

span {
  color: red;
}

div.error-list {
   color: blue;
}

.error-list {
   color: red;
}

<span>Hey, I'm red</span>

<div class="error-list">Hey, I'm <strike>red too</strike> blue</div>

<div class="error-list">Hey, I'm blue</div>

​

为了覆盖更高的特异性，我们可以使用!important，下面是在2 error-list上做的(将结果与上面的第一个样本进行比较)。

​

* {
  font-size: 14px;
  color: #666;
}

span {
  color: red;
}

div.error-list {
   color: blue;
}

.error-list {
   color: red !important;
}

<span>Hey, I'm red</span>

<div class="error-list">Hey, I'm <strike>red too</strike> blue</div>

<div class="error-list">Hey, I'm blue</div>

​

Answer 3

当您检查它时，您看到您创建的类吗？也许根本不存在。

没有代码很难分辨，但是无论如何，!important可以覆盖全局类。此外，内联css将覆盖它，但由于需要将其作为类重用，因此不建议使用

试试这个：

element[style] { /*don't change the style*/
   color: red!important;
}