Javascript 如何在css中继承类

我写了一些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;
}

但是，这些更改不会对浏览器产生相同的效果。我将它们应用到

标记上，在后一种情况下，我看到两个连续的

标记之间存在间隙。因此，
margin-*
属性似乎没有被继承（或者与第一种情况下的工作方式不同）

我正在寻找一种避免代码重复的方法。有没有办法做到这一点

我不允许使用任何外部工具或库。我只想让我的代码在原生CSS中看起来更短、简洁，我可以将其放入html文件本身（没有外部的.CSS文件）。我可以在html本身中使用javascript（尽管没有jquery）。
使用html可以继承其他类属性。你需要像这样在你的段落中应用

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

说明：

首先，我将向您展示您当前的结构。检查这把小提琴。现在你可以看到两段之间的空白。所以按照你的想法，它不会从CSS继承任何东西。因此，您需要在段落中添加公共类。像

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

这次它将应用绿色背景，而不是粉红色。我希望你能理解这里的秩序。所以它不会继承任何东西，为什么你需要这个？我们可以干掉普通班。所以无论我们想要什么，我们都可以使用多个类，就像我上面的答案一样

您应该编写一个基类，并在标记中引用它，例如：

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

文本
.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>

您需要在HTML元素中使用这两个CSS类。你能告诉我们你的HTML代码使用这些类（好的，坏的和丑陋的：P）吗？你不能继承类。CSS中只能继承属性。CSS除了类选择器之外没有任何类概念。@JukkaK.Korpela:好的。我不太懂CSS，所以我不知道
.good、.common{…}
在我的代码中到底意味着什么？这是否意味着
.good
应该包括
.common
中的所有内容？
.good.common{foobar}
的意思与
.good{foobar}.common{foobar}
相同。也就是说，
foobar
声明适用于类
good
中的元素和类
common
@JukkaK.Korpela:Ohh。。谢谢我的误解，好吧。这似乎是另一种方式。但这并不能解释我的代码中有什么错误？我不太懂CSS，所以我不知道
.good、.common{…}
在我的代码中到底意味着什么？这是否意味着
.good
应该包括
.common
中的所有内容？这是解决根本问题的好方法，但与继承无关。它只是将两个类分配给某些元素，以便元素将匹配两个不同的类选择器。在当前结构中，.bad、.common css类将覆盖.good、.common类。这是不对的。@Suresponnukalai:我不明白。请详细说明。.bad、.common后面是什么意思？顺便问一下，
class=“good common”
和
class=“common good”
之间有什么区别吗？我的意思是，如果我在两个类中设置相同的属性呢？html标记将选择哪个值？当您稍后在
中设置更多属性时，第二个值是好的（双关语）。这样我就可以定义所有类，一次定义公共属性，然后在以后添加更多（不同的）属性。
<p class="MyBaseClassForP ExtraClass AnotherExtraClass">text</p>

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

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