Html CSS不继承父类属性_Html_Css_Web_Dojo

Html CSS不继承父类属性

html css web dojo

Html CSS不继承父类属性,html,css,web,dojo,Html,Css,Web,Dojo,我有下面的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

我有下面的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>

我的问题是，前两个/下一个按钮在没有再次显式定义的情况下不会继承ButtonContpane类，即使它位于父级

ButtonContentTitle

中。为了说明这一点，我在没有ButtonContpane属性的情况下显式定义了下一个按钮，开发工具中的结果HTML在已定义的中不包含ButtonContPane，但继承的部分包含ButtonContPane，其属性为灰色：

我的总体目标是制作CSS代码的样板，以便在我的组织内重复使用。我的语法错了吗？我的选择器结构是否不正确？感谢您抽出时间

我想您希望“下一步”和“上一步”按钮继承这些属性：

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

不幸的是（对您来说），并非所有属性都由元素的子元素/子元素继承，而且并非所有元素都将从其父元素/父元素继承。这两个问题你都遇到了

填充、边框半径和框阴影不会自动继承：
颜色通常是继承的，但按钮是表单元素，表单元素不会从其父元素继承属性：

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

下面是一个简单的示例，演示如何显式地告诉元素从其父元素继承属性。单击“运行代码段”以查看结果按钮

.wrapper1，
.wrapper 2{
颜色：红色；
填充：20px；
盒影：0.3pxRGBA（0,0,0,0.4）；
边界半径：10px；
利润率：10px；
宽度：100px；
}
.wrapper2按钮{
颜色：继承；
填充：继承；
盒影：继承；
边界半径：继承；
边界：无；
}


此按钮不继承。
我的纽扣
此按钮不会继承。
我的纽扣

我假设您希望“下一步”和“上一步”按钮继承这些属性：

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

不幸的是（对您来说），并非所有属性都由元素的子元素/子元素继承，而且并非所有元素都将从其父元素/父元素继承。这两个问题你都遇到了

填充、边框半径和框阴影不会自动继承：
颜色通常是继承的，但按钮是表单元素，表单元素不会从其父元素继承属性：

下面是一个简单的示例，演示如何显式地告诉元素从其父元素继承属性。单击“运行代码段”以查看结果按钮

.wrapper1，
.wrapper 2{
颜色：红色；
填充：20px；
盒影：0.3pxRGBA（0,0,0,0.4）；
边界半径：10px；
利润率：10px；
宽度：100px；
}
.wrapper2按钮{
颜色：继承；
填充：继承；
盒影：继承；
边界半径：继承；
边界：无；
}


此按钮不继承。
我的纽扣
此按钮不会继承。
我的纽扣

它们是否在某个class=“scViewer”下面？由于您只发布了代码其余部分的图片，因此我们无法

ctrl-f

查看它们是否正确。一般提示：代码图片是绝对无用的。@MarcB是的，它被声明为根div，我最初排除了它，但它确实存在（请参见编辑）。这张图片只是为了证明这个类确实没有在开发工具中定义。就我在CSS中所认为的，属性并不是由子元素继承的。因此.scViewer.ButtonContpane只会影响类.ButtonContpane的元素。使用.scViewer.buttonContentPane.scViewButtonContent显式定义按钮是一个选项，可以为其提供所需的样式，也可以尝试使用逗号来定义.scViewer.buttonContentPane.scViewer.buttonContentPane按钮，这样就不必编写两次相同的代码。编辑：子级只能从父级继承特定的CSS样式（字体系列、文本对齐等）。@Benneb10这些特定的CSS可继承元素是什么，它们是否在某个规范中定义？还有，我不太清楚你用逗号是什么意思approach@Rice很抱歉，我没有回应，如果您仍然感兴趣，这里有一个stackOverflow，它列出了继承的CSS属性，它们是否在某个class=“scViewer”下面？由于您只发布了代码其余部分的图片，因此我们无法

ctrl-f