发表新帖
发表新帖

inherit from another class

后端 未结
关注
4 1389
生来不讨喜
生来不讨喜 2020-12-20 17:41

how is it possible to make one class inherit from another in the CSS file?

input.btn {
    border:1px solid #23458c;
    background:url(\'gfx/layout.btn_bg.p
相关标签:
4条回答
  • 梦如初夏
    2020-12-20 17:41

    SCSS/SASS example:

    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; }
}
    0 讨论(0)
  • 悲&欢浪女
    2020-12-20 17:48

    According to: http://dorward.me.uk/www/css/inheritance/ it is not possible and needed.

    0 讨论(0)
  • 逝去的感伤
    2020-12-20 18:04

    Give the HTML element both classes:

    <input type="submit" class="btn btn_light" value="Action" />
    0 讨论(0)
  • 庸人自扰
    2020-12-20 18:07

    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 and this style". Then, the reference (the input button in this case) only uses one class name.

    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>

    0 讨论(0)
 看不清?
提交回复
热议问题