Question

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

Google Chrome检查员告诉我，*仍然是主要的类规范。有什么想法吗？

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

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

我的标题样式如下所示：

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

值得一提的是，我已经尝试过，有没有！important。

Answer 1

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

Answer 2

这一切都归结为哪个更高specificity。

在下面的示例中，span和error-list规则的特异性高于*，但div.error-list甚至高于error-list，所以即使如果error-list放在CSS之后，则获胜最高（与下面示例中的第一个div一样）。

覆盖

＆＃13;

* {
  font-size: 14px;
  color: #666;
}

span {
  color: red;
}

div.error-list {
   color: blue;
}

.error-list {
   color: red;
}

＆＃13;

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

＆＃13;

要覆盖更高的特异性，可以使用!important，低于2 error-list完成（比较上面第一个样本的结果）。

＆＃13;

* {
  font-size: 14px;
  color: #666;
}

span {
  color: red;
}

div.error-list {
   color: blue;
}

.error-list {
   color: red !important;
}

＆＃13;

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

＆＃13;

Answer 3

当您检查它时，您是否看到了您创建的课程？也许根本不存在。

没有代码很难分辨，但无论如何!important可以覆盖全局类。内联css也会覆盖它，但由于你需要将它作为一个类重用，所以不建议使用

试试这个：

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

CSS *重写类样式

3 个答案: