如何解决从另一个类继承
| 如何使一个类从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\');
}
在这里,我希望input.btn_light
从input.btn
继承..在CSS文件中怎么办?
@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\');
}
解决方法
给HTML元素两个类:
<input type=\"submit\" class=\"btn btn_light\" value=\"Action\" />
, 根据:http://dorward.me.uk/www/css/inheritance/,这是不可能且不需要的。
, 除了可接受的答案以外,您还可以对CSS执行以下操作。区别在于,这种方式不是在要使用的位置使用多个类名,而是在CSS中使用多个类名来表示“使用此样式和此样式”。然后,引用(在这种情况下为输入按钮)仅使用一个类名。
最后,它完成与接受的答案相同的事情。
注意:我更改了边框的值,因为我想使用对代码段不太敏感的值。
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>
, SCSS / SASS示例:
的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; }
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。