如何从另一个CSS文件中覆盖CSS样式？

Question

我需要覆盖style.css中的头部样式。

这是我需要覆盖的样式。

.t_header{
    text-align: center;
    background-color: #bfd4f0;  
    color:#15428b;
    white-space:nowrap ;
    margin:0px 10px 0px 10px;
    height:1.5em;
}

现在我创建了另一个名为black.css的css文件，我需要为.t_header创建不同的背景颜色。

.t_header{
    text-align: center;
    background-color: white !important; 
    color:#15428b;
    white-space:nowrap ;
    margin:0px 10px 0px 10px;
    height:1.5em;
}

我已经使用了!important来覆盖style.css中的样式，但是它没有起作用，但出于某种原因，我使用!important覆盖的其他样式类和ID却很好地工作。我希望有人可以给我另一种覆盖样式的方法，而不是使用!important。谢谢。

- Lyn

---

你有试过在旧的 CSS 加载完成后加载所需的 CSS 吗？ - undefined

@Mr.Alien谢谢，但是我不能像那样使用它，我有一个文件名为contol.aspx，你将需要在那里调用css文件主题，如果你调用black.css，将使用黑色主题，但是如果你调用green.css，它将覆盖黑色并且一切都会变成绿色。 - undefined

@Lyn 不要覆盖，移除黑色，只使用绿色。 - undefined

@Lyn，最好你克隆样式表，覆盖会让人头疼的。 - undefined

@Mr.Alien 没有其他办法，只能使用!important :( 我所需要做的就是覆盖t_header，然后一切都完成了 :( - undefined

Answer 1

尝试清除浏览器缓存，然后按照以下顺序将文件添加到您的代码中 -

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="black.css">

覆盖CSS不需要包含所有属性 -

这么多代码就足够了 -

.t_header{
    background-color: #fff;
}

- Sujit Agarwal

---

顺序确实很重要，但他正在使用!important，这并不影响我所怀疑的是，可能是继承在其中起作用。 - undefined

清除浏览器缓存！我总是忘记这有多重要。 - undefined

Answer 2

通常不建议使用!IMPORTANT。尝试增加特定性。

body div.theader { background: white; }

也请记住，通常不鼓励使用超过四个选择器。

你明白了吧...

- OneChillDude

---

谢谢，但我不能像那样使用它，我有一个文件名为contol.aspx，你将需要在那里调用css文件主题，如果你调用black.css，将使用黑色主题，但如果你调用green.css，它将覆盖黑色并使一切变成绿色。 - undefined