如何在css中继承类

I wrote few css classes such as these:

我写了几个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
}

As you see out of 6 attributes, 4 are exactly same. So I thought of avoiding this duplication by writing a .common class and inherit them when defining the above classes, as shown below:

如您所见,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;
}

But these change doesn't produce the same effect on the browser. I'm applying them on <p> tags and I see a gap between two consecutive <p> tags in the latter case. So it seems margin-* attributes are not inherited (or doesn't work the way it works in the first case).

但是这些更改不会对浏览器产生相同的影响。我在

标签上应用它们,在后一种情况下,我看到两个连续

标签之间存在间隙。所以似乎margin- *属性不是继承的(或者在第一种情况下不起作用)。

All I'm looking for a way to avoid code-duplication. Is there any way to achieve that?

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

I'm not allowed to use less or any external tool or library. I just want my code to look shorter and concise in native CSS which I can put in the html file itself (no external .css file). I'm allowed to use javascript in the html itself (no jquery though).

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

3 个解决方案

#1

.bad, .common //inherit .commom doesn't do what you think, it sets styles to both, to .bad and .common elements.

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

If you have both classes on each element, you can use that.

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

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

If you have just one class, bad and good on each element, use that

如果你只有一个类,每个元素都不好,那么就使用它

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

#2

Using HTML you can inherit the other classes properties. You need to apply in your paragraph like this.

使用HTML,您可以继承其他类属性。你需要像这样申请你的段落。

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

Need to update your CSS like below.

需要更新您的CSS,如下所示。

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

Explanation:

First I will show you want your current structure is doing. Check this fiddle http://jsfiddle.net/FeyLJ/. Now you can see the margin between two paragraph. So As of your thinking it will not inherit anything from CSS. So need to add the common class to your paragraph. Like

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

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

After adding this see the fiddle http://jsfiddle.net/FeyLJ/1/ what effect you got it? Now the margin issue gone. But did you notice that it produce one more issue. Yes both the paragraph now apply the same color background. Why? In CSS if you use the same class with same properties two times then it will take properties from the last defined place. In this case it is taken the same bad class background for both.

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

For your clarification move the order of the class like below.

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

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

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

This time it will apply the green color background instead of pink color. I hope you understand what order is doing here. So it will not inherit anything and why you need this? We can take out the common class. So Whereever we want, we can just use multiple classes like my answer above.

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

Here is the fiddle with my answer.

这是我答案的小提琴。

#3

you should write a BaseClass and refer it in your tags for E.G :

你应该写一个BaseClass并在你的E.G标签中引用它:

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

#1