未应用 child 内容占位符中的 CSS 样式 sheet

Question

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

child 页面中的 CSS 样式 sheet 的样式应该覆盖 CSS 样式 sheet 中的某些样式在母版页中。只有母版页中的一些样式应该被覆盖，而不是全部。

母版页中的 CSS 样式 sheet 引用位于 head 标记的顶部，内容占位符位于底部，所以我认为 child 页面会优先，但它不会。

如何让 child 页面中的样式 sheet 优先于母版页中的样式 sheet？

谁能解释一下是什么原因导致的？

Answer 1

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

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

Answer 2

如果您不想使用 !important 使用具有特定 class 的子页面 container/target 是可行的方法

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

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

Answer 3

我找到了问题的答案 here。

我的风格 sheet 参考看起来像这样

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

并且如 there 所述，浏览器在此上下文中无法理解 ~。

我将引用更改为

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

现在可以正常使用了。

CSS style sheet in child content place holder not being applied