如何在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类来避免这种重复，并在定义上面的类时继承它们，如下所示：

.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-*属性不是继承的（或者在第一种情况下不起作用）。

我正在寻找一种避免代码重复的方法。 有没有办法实现这一目标？

我不允许使用更少或任何外部工具或库。 我只是希望我的代码在原生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;
}

说明 ：

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

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

添加之后看到小提琴http://jsfiddle.net/FeyLJ/1/你得到了什么效果？ 现在保证金问题消失了。 但是你注意到它又产生了一个问题。 是的，段落现在都应用相同的颜色背景。 为什么？ 在CSS中，如果您使用具有相同属性的相同类两次，则它将从最后定义的位置获取属性。 在这种情况下，两者都采用相同的坏类背景。

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

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

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

这次它将应用绿色背景而不是粉红色。 我希望你明白这里的订单是做什么的。 所以它不会继承任何东西，为什么你需要这个？ 我们可以拿出公共课。 所以无论我们想要什么，我们都可以像上面的答案一样使用多个类。

这是我答案的小提琴。

Answer 2

.bad, .common //inherit .commom没有按你的想法做，它将样式设置为.bad和.common元素。

如果每个元素都有两个类，则可以使用它。

<style>

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

</style>
<p class="common bad">bad</p>
<p class="common good">good</p>

如果你只有一个类，每个元素bad good ，那么就使用它

<style>

.bad, .good {background: #fff0f0; color: #800; width: 1024px; padding-left: 10px; margin-top: 0; margin-bottom: 0;}
.good {background: #efe; color: #080; }

</style>
<p class="bad">bad</p>
<p class="good">good</p>

Answer 3

你应该写一个BaseClass并在你的标签中引用它：

<p class="MyBaseClassForP ExtraClass AnotherExtraClass">text</p>