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>

CSS不继承父类属性

1 个答案: