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>