我正在尝试为网页制作警告横幅。我在面板内的 div 内使用标签，页面上声明了一些 css 样式。我不想在每个页面上都声明这些样式，所以我将它们移到了我的 Site.css 文件中(由母版页使用)。当我这样做时，没有应用 css 样式的问题。母版页上的所有内容都格式正确，但内容页中声明的控件却不正确。
听听我在内容页面上的内容:
<asp:Content ID="Content2" ContentPlaceHolderID="ErrorMessages" runat="server">
<asp:Panel ID="WarningBanner" runat="server" CssClass="warningPanel" Visible="true">
<div class="warningDiv">
<asp:Label ID="testLabel" runat="server" Text="test" CssClass="warningLabel"></asp:Label>
</div>
</asp:Panel>
<style>
.warningPanel {
margin: auto;
width: 1000px;
background-color: red;
border: 10px solid red;
}
.warningLabel {
display: block;
color: white;
font-size: large;
}
.warningDiv {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</asp:Content>
听听我在母版页上看到了什么:
<head runat="server">
...ext...
<link href="~/Content/Site.css" rel="stylesheet" />
...ext...
</head>
<body>
...ext...
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
<div/>
...ext...
<body/>
这就是我的 Site.css 文件的样子:
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
.warningPanel {
margin: auto;
width: 1000px;
background-color: red;
border: 10px solid red;
}
.warningLabel {
display: block;
color: white;
font-size: large;
}
.warningDiv {
margin-left: auto;
margin-right: auto;
text-align: center;
}
...ext...
我做错了什么？
最佳答案
CSS 文件通常被浏览器缓存。发生这种情况时，对样式所做的更改将不会显示在 HTML 显示中。
您可以在更改 CSS 内容后清除浏览器缓存以查看修改后的样式。另一种方法也可以确保您的客户无需清除浏览器缓存就可以看到更新后的 CSS，方法是将查询字符串附加到链接:
<link href="~/Content/Site.css?version=2.5" rel="stylesheet" type="text/css" />
每次修改 CSS 文件时，您都会设置一个新的 version 编号以强制下载更新的 CSS 文件。
关于母版页上链接的 CSS 不适用于内容页上的控件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39086510/