从另一个类继承

问题描述

| 如何使一个类从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; }
}

另一个继承继承