CSS繼承不父類的屬性

Question

我有以下的HTML

<div id="borderContainer" class="scViewer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"> 
    <div id="buttonPagerContentPane" data-dojo-type="dijit/layout/ContentPane" align="center" data-dojo-props="region:'bottom'" class="buttonContentPane"> 
    <div id="buttonPagerTitle" class="ContentPaneTitle"> 
     Sheet Selector <br> 
    </div> 
     <button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="PreviousButtonAttachNode" id="previousButton" class="scViewButtonContent buttonContentPane"> 
     Previous 
     </button> 
     <button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="NextButtonAttachNode" id="nextButton" class="scViewButtonContent"> 
     Next 
     </button> 
    </div> 
</div> 

下面CSS：

.scViewer { 
    color: #2546ff; 
} 

.scViewer .buttonContentPane { 
    padding: 5px 5px; 
    color:#FFFFFF; 
    border-radius: 5px; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
} 

.scViewer .ContentPaneTitle{ 
    color: #2546ff; 
    font-weight: bold; 
} 
.scViewer .buttonContentPane .scViewButtonContent{ 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
    text-decoration: none; 
} 

我的問題是，這兩個一個/下一個按鈕不繼承buttonContentPane類沒有明確定義它，即使它在父代buttonPagerTitle <div>之內。爲了演示上述內容，我明確定義了不帶buttonContentPane屬性的nextButton，開發工具中生成的HTML不包含定義的buttonContentPane，但是遺傳部分包含buttonContentPane，其屬性變灰：

我的總體目標是在我的組織中重新使用樣板CSS代碼。我的語法錯了嗎？我不正確地構造選擇器嗎？感謝您的時間

Answer 1

我想，你希望你的「下一步」和「上一個」按鈕來繼承這些特性：

.scViewer .buttonContentPane { 
    padding: 5px 5px; 
    color:#FFFFFF; 
    border-radius: 5px; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
} 

不幸的是（你），並不是所有的屬性是由元素的孩子繼承/後代，而不是所有的元素都會從他們的父母/祖先繼承。您遇到了這兩個問題。

• 填充，邊界半徑和箱陰影不能自動繼承：https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
• 顏色通常是繼承的，但按鈕是表單元素，和表單元素不從父母那裏繼承屬性：Why are CSS-styles not inherited by HTML form fields?

如果您希望它們的樣式正確（如您在問題中提到的那樣），您需要直接將該類添加到按鈕中，否則您需要在CSS中編寫規則說明按鈕應該繼承父母的屬性。

以下是一個簡單示例，顯示如何顯式指示元素從其父項繼承屬性。點擊「運行代碼片段」查看結果按鈕。

.wrapper1, 
 
.wrapper2 { 
 
    color:red; 
 
    padding: 20px; 
 
    box-shadow: 0 0 3px rgba(0,0,0,0.4); 
 
    border-radius: 10px; 
 
    margin: 10px; 
 
    width: 100px; 
 
} 
 

 
.wrapper2 button { 
 
    color: inherit; 
 
    padding: inherit; 
 
    box-shadow: inherit; 
 
    border-radius: inherit; 
 
    border: none; 
 
}

<div class="wrapper1"> 
 
    This button doesn't inherit. 
 
    <button>My button</button> 
 
</div> 
 

 
<div class="wrapper2"> 
 
    This button does inherit. 
 
    <button>My button</button> 
 
</div>