CSS样式继承

Question

让我们说我想定义2种风格.

.color_red { color: Red; }
.banner { display: block; width: 100%; }

有没有办法可以让h1样式继承color_red样式？我不想这样做

<div class="banner color_red">This is my banner.</div>

我宁愿做这样的事......

.banner { ... inherit: color_red; }
...
<div class="banner">This is my banner.</div>

并且横幅有红色文字.

Answer 1

你必须写:

.color_red, .banner { color: Red; }
.banner { display: block; width: 100%; }

Answer 2

不,没有办法直接这样做,更好地分享样式定义:

.color_red,
.banner
{
  color: red;
}

但是我想指出你是从错误的方向接近问题.你的加价应该独立于风格,并且应该理想地引领发展风格.这意味着定义.color_red是一个严重的问题,因为它没有说明标记的语义,如果你需要设置那个标记蓝色的样式,你会遇到多少问题？

允许你的加价存在的更好:

<div class="banner highlight">I am a banner AND I am highlighted!</div>

支持者:

<style>
.highlight
{
  color: red;
}

.banner
{
  display: block; 
  width: 100%;
}
</style>