Question

我正在开发一个ASP.Net页面。我正在使用bootstrap，这工作正常。我还有一个自定义样式表，用于微调外观和感觉。至于过去两天的某些时候，我在自定义样式表中创建并尝试应用于页面上的元素的任何新类都无法进行更改。例如，我在页面上有一个div，我创建了一个基本div来解决这个问题，即使这适用于页面上的任何元素，我正在尝试更改背景颜色。我创建了一个css类＆＃34; .background-pink＆＃34;几天前如果我设置我的div来使用那个类，div会变成粉红色的样子。但是，我在样式表中的那个类下面有一个名为.background-blue的另一个类，它做同样的事情，它甚至将背景设置为相同的颜色（它原来是蓝色但是在测试期间我将它改为与颜色相同的颜色background-pink class来缩小问题范围）如果我改变div类来引用.background-blue类，粉红色的背景会消失并且不会应用样式。然后，我可以将课程设置为粉红色，然后变回粉红色就好了。这将复制到样式表中任何新创建的类中。

我尝试清除浏览器缓存并尝试了隐身模式，不同的浏览器具有相同的结果。我已经检查了我的CSS中的语法错误但没有找到。 Visual Studio中的intelliprompt可以很好地找到类名，让我相信我把它正确地链接在头部。我已经重命名了样式表，但没有变化。我已多次清理并重建应用程序，但没有结果。如果我使用内联css将样式放在div中，它可以正常工作。

这对我没有意义，任何建议都会受到赞赏。谢谢！

＆＃13;

.background-pink {
  background-color: #E33491;
}

.background-blue {
  background-color: blue;
}

.font-white {
  color: white;
}

＆＃13;

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

＆＃13;

以下是整个样式表

.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规则优先考虑此类以将背景渲染为蓝色。

P.S。在决定使用!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>

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

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

有些Css课程在工作，有些则没有

1 个答案:

更多示例