javascript - css中如何继承类

Question

我写了几个这样的 CSS 类:

.bad
{
    background:#fff0f0;
    color:#800;
    width:1024px;
    padding-left:10px;
    margin-top:0;
    margin-bottom:0;
}
.good
{
    background:#eeffee;
    color:#008800; 
    width:1024px;        //same as above
    padding-left:10px;   //same as above
    margin-top:0;        //same as above
    margin-bottom:0;     //same as above
}

如您所见，在 6 个属性中，有 4 个完全相同。所以我想通过编写 .common 来避免这种重复class 并在定义上述类时继承它们，如下所示:

.common
{
    width:1024px;
    padding-left:10px;
    margin-top:0;
    margin-bottom:0;
}
.good, .common    //inherit .commom
{
    background:#eeffee;
    color:#008800;
}
.bad, .common     //inherit .commom
{
    background:#fff0f0;
    color:#800;
}

但这些更改不会在浏览器上产生相同的效果。我在 <p> 上应用它们标签，我看到两个连续的 <p 之间有空隙> 在后一种情况下的标签。看来margin-*属性不是继承的(或者不像第一种情况下那样工作)。

我正在寻找一种避免代码重复的方法。有什么办法可以实现吗？

我不允许使用 less或任何外部工具或库。我只是希望我的代码在 native CSS 中看起来更短和简洁，我可以将其放入 html 文件本身(没有外部 .css 文件)。我被允许在 html 本身中使用 javascript(虽然没有 jquery)。

Answer 1

使用 HTML，您可以继承其他类的属性。你需要像这样在你的段落中应用。

<p class="good common">Some Text</p>
<p class="bad common">Some new Text</p>

需要像下面这样更新您的 CSS。

.common
{
width:1024px;
padding-left:10px;
margin-top:0;
margin-bottom:0;
}
.good
{
background:#eeffee;
color:#008800;
}
.bad
{
background:#fff0f0;
color:#800;
}

解释:

首先我会向您展示您希望您当前的结构在做什么。检查这个 fiddle http://jsfiddle.net/FeyLJ/ .现在您可以看到两段之间的边距。所以按照你的想法，它不会从 CSS 继承任何东西。因此需要将公共(public)类添加到您的段落中。喜欢

 <p class="good common">My Smaple Text</p>
 <p class="bad common">My another Simple Text</p>

添加后请参阅 fiddle http://jsfiddle.net/FeyLJ/1/你得到了什么效果？现在 margin 问题消失了。但是你有没有注意到它又产生了一个问题。是的，这两个段落现在应用相同的颜色背景。为什么？在 CSS 中，如果你两次使用具有相同属性的同一个类，那么它将从最后定义的地方获取属性。在这种情况下，两者都采用相同的不良类(Class)背景。

为了您的澄清，移动类的顺序如下。

.bad, .common 
{
background:#fff0f0;
color:#800;
} 

.good, .common 
{
background:#eeffee;
color:#008800;
}

这次它将应用绿色背景而不是粉红色。我希望你明白 order 在这里做什么。所以它不会继承任何东西，为什么你需要这个？我们可以去掉普通类。所以无论我们想要什么，我们都可以像我上面的回答一样使用多个类。

Here is the fiddle with my answer.