Question

如何在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');
}

Answer 1

为HTML元素提供两个类：

<input type="submit" class="btn btn_light" value="Action" />

Answer 2

根据：http://dorward.me.uk/www/css/inheritance/，这是不可能的，也是必要的。

Answer 3

作为已接受答案的替代方法，您还可以使用CSS执行以下操作。不同之处在于，不是使用多个类名称，而是使用，这种方式使用CSS中的多个类名称来表示＆＃34;使用此样式和这个风格＆＃34 ;.然后，引用（在这种情况下为输入按钮）仅使用一个类名。

最后，它完成了与接受的答案相同的事情。

注意：我更改了边框的值，因为我想使用对代码段不那么微妙的值。

＆＃13;

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

＆＃13;

<body>
  <input type="button" class="btn" value="Regular">
  <br>
  <input type="button" class="btn_light" value="Light">
</body>

＆＃13;

Answer 4

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

继承自另一个类

@vadiklk

4 个答案: