CSS 未继承父 class 属性

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;
}

我的问题是这两个 previous/next 按钮没有继承 buttonContentPane class 而不是再次明确定义它，即使它在父 buttonPagerTitle <div> 中。.为了演示在上面，我明确定义了没有 buttonContentPane 属性的 nextButton，开发工具中的结果 HTML 不包含定义中的 buttonContentPane，但继承部分包含 buttonContentPane，其属性显示为灰色：

我的总体目标是制作样板 CSS 代码以便在我的组织内重复使用。我的语法错了吗？我是否错误地构建了选择器？谢谢你的时间

Answer 1

我假设您希望 'next' 和 'previous' 按钮继承这些属性：

.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);
}

不幸的是（对您而言），并非所有属性都由元素的 children/descendants 继承，也并非所有元素都会从其 parents/ancestors 继承。您遇到了这两个问题。

内边距、边框半径和框阴影不会自动继承：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?

如果您希望按钮的样式正确（正如您在问题中提到的那样），您需要直接将 class 添加到按钮，或者您需要编写规则您的 CSS 明确说明按钮应从其父级继承属性。

下面是一个简单的例子，展示了如何显式地告诉一个元素从它的父元素继承属性。单击 "Run code snippet" 查看生成的按钮。

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

CSS 未继承父 class 属性

CSS not inheriting parent class properties

html

css

dojo

web