子內容占位符中的CSS樣式表未應用

Question

我有一個主頁，其head標簽中包含CSS樣式表引用。 我的主頁標題標簽中也有一個Content Place Holder。 在使用該母版頁的子頁中，我將特定於該頁的CSS樣式表引用放置在頭部的Content Placeholder中。

子頁面中的CSS樣式表具有應替換為主頁面CSS樣式表中的某些樣式的樣式。 應該僅覆蓋母版頁中的某些樣式，而不是全部樣式。

主頁上的CSS樣式表引用位於head標記的頂部，內容占位符位於底部，因此我認為子頁面中的CSS樣式表具有優先權，但並非如此。

如何獲得子頁面中的樣式表優先於母版頁面中的樣式表？

有人可以解釋造成這種情況的原因嗎？

Answer 1

如果在兩個不同的頁面中具有相同的類名，並且想要更改默認值，則在聲明后立即使用“！important”。

.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

我在這里找到了問題的答案。

我的樣式表參考看起來像這樣

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

和解釋存在的~是不是在這種情況下，瀏覽器的理解。

我將參考改為

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

現在工作正常。