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> 中。为了证明上面的这一点，我明确定义了 nextButton 而没有buttonContentPane 属性，开发工具中生成的 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 中编写明确声明按钮应从其父级继承属性。

下面是一个简单的例子，展示了如何明确地告诉一个元素从其父元素继承属性。单击“运行代码 sn-p”以查看生成的按钮。

.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>