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

Question

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

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

主页面中的CSS样式表引用位于head标记的顶部，而Content Place Holder位于底部，因此我认为子页面中的那个将优先，但它不会。

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

有人可以解释导致这种情况发生的原因吗？

Answer 1

如果您在两个不同的页面中拥有相同的班级名称并且想要更改默认值，请使用＆＃39;！important＆＃39;宣言后立即。

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

Answer 2

如果您不想使用!important使用具有特定类的子页面容器/目标，那么

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

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

Answer 3

我找到了问题here的答案。

我的样式表参考文件看起来像这样

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

并且正如there所解释的那样，浏览器不会理解~。

我将引用更改为

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

它现在运作正常。