html - 有些 Css 类有效，有些则无效

Question

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

我尝试过清除浏览器缓存并尝试隐身模式，不同的浏览器结果相同。我检查了我的 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 规则优先考虑此类以将背景呈现为蓝色。

附言注意this决定在适当的地方使用 !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>

---

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

使用 ctrl + F5 硬刷新通常可以解决问题，但在极端情况下，您需要手动调整标题。参见 this回答更多信息。