CSS 从另一个类继承
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6175633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
inherit from another class
提问by clarkk
how is it possible to make one class inherit from another in the CSS file?
如何在 CSS 文件中使一个类从另一个类继承？
input.btn {
border:1px solid #23458c;
background:url('gfx/layout.btn_bg.png');
color:#f0f5fa;
font-weight:bold;
margin-right:6px;
padding:1px 6px 2px 6px;
cursor:pointer;
}
input.btn_light {
border:1px solid #717b8f;
background:url('gfx/layout.btn_light_bg.png');
}
here I want input.btn_lightto inherit from input.btn.. how is that possible to do in the CSS file?
在这里，我想input.btn_light从input.btn..继承，这在 CSS 文件中怎么做？
@vadiklk
@vadiklk
input.btn {
border:1px solid #23458c;
background:url('gfx/layout.btn_bg.png');
color:#f0f5fa;
font-weight:bold;
margin-right:6px;
padding:3px 6px 4px 6px;
cursor:pointer;
}
input.btn_light {
input.btn;
border:1px solid #717b8f;
background:url('gfx/layout.btn_light_bg.png');
}
回答by roryf
Give the HTML element both classes:
给 HTML 元素两个类：
<input type="submit" class="btn btn_light" value="Action" />
回答by L. Rother
According to: http://dorward.me.uk/www/css/inheritance/it is not possible and needed.
根据：http: //dorward.me.uk/www/css/inheritance/这是不可能和需要的。
回答by Jim
As an alternative to the accepted answer, you can also do the following with your CSS. The difference being that instead of using multiple class names where it will be used, this way uses multiple class names in the CSS to say "use this style andthis style". Then, the reference (the input button in this case) only uses one class name.
作为已接受答案的替代方案，您还可以使用 CSS 执行以下操作。不同之处在于，这种方式不是在将要使用的地方使用多个类名，而是在 CSS 中使用多个类名来表示“使用这种样式和这种样式”。然后，引用（本例中的输入按钮）仅使用一个类名。
In the end, it accomplishes the same thing as the accepted answer.
最后，它完成了与接受的答案相同的事情。
Note:I changed the value of the borders because I wanted to use values that were less subtle for the snippet.
注意：我更改了边框的值，因为我想对代码段使用不那么微妙的值。
input.btn,
input.btn_light {
border: 2px solid red;
background: url('gfx/layout.btn_bg.png');
color: black;
font-weight: bold;
margin-right: 6px;
padding: 1px 6px 2px 6px;
cursor: pointer;
}
input.btn_light {
border: 2px solid green;
background: url('gfx/layout.btn_light_bg.png');
}<body>
<input type="button" class="btn" value="Regular">
<br>
<input type="button" class="btn_light" value="Light">
</body>回答by Patrick Berkeley
SCSS/SASS example:
SCSS/SASS 示例：
HTML
HTML
<h1><span class='section-title'>Some heading!</span></h1>
<h2><span class='section-title'>Some heading!</span></h2>
<h3><span class='section-title'>Some heading!</span></h3>
<h4><span class='section-title'>Some heading!</span></h4>
<h5><span class='section-title'>Some heading!</span></h5>
<h6><span class='section-title'>Some heading!</span></h6>
SCSS
社会保障局
// This will style every .section-title element within
// a heading the same as the heading.
.section-title {
h1 & { @extend h1; }
h2 & { @extend h2; }
h3 & { @extend h3; }
h4 & { @extend h4; }
h5 & { @extend h5; }
h6 & { @extend h6; }
}
