有些Css类工作，另一些则不工作。

Question

我正在开发一个ASP.Net页面。我正在使用引导，这是很好的工作。我还有一个定制的样式表，用来微调外观和感觉。在过去的两天中，我在自定义样式表中创建并尝试应用于我页面上的元素的任何新类都无法进行更改。例如，我在页面上有一个div，我创建了一个基本div来解决这个问题，尽管这适用于页面上的任何元素，而我正试图更改背景色。几天前，我创建了一个css类“.back-粉色”，如果我将div设置为使用该类，div就会像预期的那样变成粉红色。但是，在样式表中还有另一个类，名为. blue，用于做相同的事情，它甚至将背景设置为相同的颜色(它最初是蓝色的，但在测试期间，我将它更改为与背景粉红色类相同的颜色，以缩小问题范围)，如果我将div类更改为引用.blue类，则粉红色背景将消失，样式将不适用。然后，我可以将类设置为粉色类，它会更改为粉红色，非常好。这在我的样式表中的任何新创建的类中都会被复制。

我尝试过清除浏览器缓存，并尝试了隐藏模式，不同的浏览器都有相同的结果。我检查了css中的语法错误，但没有发现任何错误。Visual中的智能提示可以很好地找到类名，这使我相信我的头上有正确的链接。我已经重命名了样式表，但没有更改。我已经多次清理和重建应用程序，但没有结果。如果我使用内联css将样式放入div中，那么它工作得很好。

这对我来说毫无意义，任何建议都将不胜感激。谢谢!

​

.background-pink {
  background-color: #E33491;
}

.background-blue {
  background-color: blue;
}

.font-white {
  color: white;
}

<div class="background-blue">test</div>
<div class="background-pink">test</div>
<div style="background-color:blue">test</div>

​

下面是整个样式表

.negativetopmargin
{
margin-top:-5px;

}

.background-pink
{
background-color:#E33491;
}

.background-blue
{
background-color:#E33491;
}

.font-white
{
color:white;
}

.center-div
{
position:relative;
margin-left:auto;
margin-right:auto;
}

body
{
font-family: 'Palanquin', sans-serif;
background-color:red;
}


.padding-4
{
padding:4px;
}

注意body方法，整个页面的字体设置都是正确的，但是用于测试该方法的背景色也没有发生任何变化。

Answer 1

尝试向.background-blue类!important添加以下规则

.background-blue
{
  background-color: blue !important; 
}

它听起来像是在您的自定义样式表中的某个位置，您正在用另一个类覆盖.background-blue类。

我还假设问题仅限于.background-blue类，在其他类中没有发现。!important规则将优先级放在这个类上，以便将背景呈现为蓝色。

在决定使用!important规则的适当位置时，请注意!important的文章。你不想经常使用它。

进一步的示例

​

.background-pink {
  background-color: #E33491;
}

.background-blue {
  background-color: blue !important;
}

<div class="background-blue ">test</div>
<div class="background-pink">test</div>
<div style="background-color:blue">test</div>

<!-- below div uses both background-blue and background-pink classes, 
as background-blue uses the !important rule 
it overrides the last class applied which is background-pink !-->
<div class="background-blue background-pink">test</div>

​

正如注释中提到的那样，服务器也可能知道更新的样式表，但将头发送到浏览器，浏览器指示浏览器使用较旧的缓存版本呈现网页。您可以通过使用F12打开开发工具并研究页面加载时的标题来检查这一点。

使用ctrl + F5进行硬刷新通常可以解决这个问题，但在极端情况下，需要手动调整标头。有关更多信息，请参见这答案。