inherit from another class_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-09 00:40 出处：网络

how is it possible to make one class inherit from another in the CSS file? input.btn { border:1px solid #23458c;

相关专题：css

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.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_light to inherit from input.btn.. how is that possible to do in the CSS file?

@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;
  开发者_StackOverflow中文版  background:url('gfx/layout.btn_light_bg.png');
}

Give the HTML element both classes:

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

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

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>

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