如何使用不应覆盖母版页页眉和页脚的母版页的 CSS 和具有自己的 CSS 的新内容页？答案

【问题标题】：How CSS with Master Page and new content page with own css that should not override masterpage header and footer?如何使用不应覆盖母版页页眉和页脚的母版页的 CSS 和具有自己的 CSS 的新内容页？
【发布时间】：2016-12-30 18:16:42
【问题描述】：

我有一个使用母版页的 ASP.Net 4.5 网站。我链接了一个在整个站点中使用的 CSS 页面。我添加了一个使用母版页的新页面，该页面具有自己的内容区域 css，因为它与 Active Reports 查看器一起使用。

当我使用 Active Reports Viewer 转到新页面时，它的 CSS 会覆盖母版页中的 CSS 以获取页眉和页脚，而我不想这样做。

关于只允许新的 CSS 文件只影响我的新页面的内容区域的任何建议。

【问题讨论】：

这似乎纯粹是 CSS 特异性的问题，而不是与 asp.net 有任何关系。关于哪些规则覆盖哪些规则的一般规则基于 CSS 规则的特殊性。特殊性相同，页面上的最后一条规则将获胜。如果您不想在 Active Reports Viewer 页面中应用页眉和页脚样式，是否存在需要这些规则的页面？使不需要的 CSS 页眉/页脚规则更加具体（并将它们与您希望它们应用的上下文联系起来）可能会解决您的问题。
可能你需要作用域css。这个css技巧可能会对你有所帮助。 css-tricks.com/saving-the-day-with-scoped-css
@VivekN scoped 没有通过定义阶段。它可能会在 Firefox 中存活一段时间（不是永远），但永远不会在其他浏览器中实现。
@JPJedi 顺便说一句，我不明白这个问题。我读了几遍，但我读到的只是“我做了一个新的样式表。它覆盖了原来的样式表，我不想那样做。”那为什么不干脆摆脱它呢？

标签： html css asp.net master-pages activereports

【解决方案1】：

不幸的是，您不能将 css 的范围仅限于内容；它适用于整个页面。您可以做的是为内容页面样式表中的类指定一个不同的名称，并将其分配给页眉和页脚部分。例如。

.contentpage-custom {
    background-color: red;
}

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">    
   <header class="contentpage-custom">
     Content Page
   </header>
</asp:Content>

【讨论】：