未应用子内容占位符中的 CSS 样式表答案

【问题标题】：CSS style sheet in child content place holder not being applied未应用子内容占位符中的 CSS 样式表
【发布时间】：2017-05-24 20:42:05
【问题描述】：

我有一个母版页，其 head 标记中包含 CSS 样式表引用。我在母版页头标记中还有一个内容占位符。在使用该母版页的子页面中，我在头部的内容占位符中放置了特定于该页面的 CSS 样式表引用。

子页面中的 CSS 样式表具有应该覆盖母版页中 CSS 样式表中的某些样式的样式。只有母版页中的一些样式应该被覆盖而不是全部。

母版页中的 CSS 样式表引用位于 head 标签的顶部，而 Content Place Holder 位于底部，所以我认为子页面中的 CSS 样式表会优先，但事实并非如此。

如何让子页面中的样式表优先于母版页面中的样式表？

有人能解释造成这种情况的原因吗？

【问题讨论】：

【解决方案1】：

如果您在两个不同的页面中具有相同的类名，并且您想更改默认值，只需在声明后立即使用 '!important'。

.red-background { background-color: red; } /* MASTER */
.red-background { background-color: green !important; } /* CHILD PAGE */

【讨论】：

1.我读过使用 !important 不是一个好习惯。 2. 我在其他页面上使用样式表的样式表引用，我不会使用！important。 3. 是否可以使用 !important 作为样式表引用？
1.编程中的每一个问题/袋子/问题都有这么多解决方案真是太棒了。您可以通过 JS 检查页面名称并决定要删除哪些样式，但这是很长的路要走。 2. 在这种情况下，您的代码将无法通过更改 css 的位置来工作。 3. 我正在使用 !important ，对我来说这是很多情况下的最佳解决方案。它是针对这类情况声明的。
您可以尝试在子页面中创建一个容器类 - 例如将其称为“子容器”，并在 css 中派生到容器，例如 -> .child-container > .red -background { 背景颜色：绿色； }

【解决方案2】：

如果您不想使用 !important 与具有特定类的子页面容器/目标一起使用是可行的方法

.some-class { 
  background-color: deepskyblue;
}

.child-container .some-class {
  background-color: deeppink;
}

【讨论】：

【解决方案3】：

我找到了我的问题here的答案。

我的样式表参考如下所示

 <link href="~/Styles/PopForms.css" rel="stylesheet" />

正如there 所解释的，~ 在这种情况下不被浏览器理解。

我将引用更改为

<link href="../Styles/PopForms.css" rel="stylesheet" />

现在可以正常使用了。

【讨论】：