一些 Css 类可以工作，而另一些则不能

Question

我正在开发一个 ASP.Net 页面。我正在使用引导程序，并且工作正常。我还有一个自定义样式表，用于微调外观。在过去 2 天的某个时间点，我在自定义样式表中创建并尝试应用于我页面上的元素的任何新类都无法进行更改。例如，我在页面上有一个 div，我创建了一个基本 div 来解决此问题，即使这适用于页面上的任何元素，但我正在尝试更改其背景颜色。几天前，我创建了一个 CSS 类“.background-pink”，如果我将 div 设置为使用该类，则 div 会像预期的那样变成粉红色。但是，我在样式表中该类的正下方有另一个类，称为 .background-blue，它执行相同的操作，它甚至将背景设置为相同的颜色（它最初是蓝色，但在测试期间我将其更改为与background-pink 类来缩小问题的范围），如果我更改 div 类以引用 .background-blue 类，粉红色背景消失并且不应用样式。然后我可以将班级设置回粉红色的班级，它会变回粉红色就好了。这会在我的样式表中任何新创建的类中复制。

我尝试过清除浏览器缓存并尝试隐身模式，不同的浏览器具有相同的结果。我检查了我的 css 中的语法错误，但没有发现。 Visual Studio 中的智能提示可以很好地找到类名，这让我相信我已经正确地将它链接在头脑中。我已重命名样式表，但没有更改。我已经多次清理并重建了应用程序，但没有任何结果。如果我使用内联 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 规则的适当位置时，请注意this 文章。你不想经常使用它。

---

进一步的例子

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

---

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

使用 ctrl + F5 硬刷新通常可以解决问题，但在极端情况下，您需要手动调整标题。有关详细信息，请参阅this 答案。