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＆gt;之间存在差距。后一种情况下的标签。所以似乎margin-*属性不是继承的（或者在第一种情况下不起作用）。

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

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

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

<强> Here is the fiddle with my answer.

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并在你的标签中引用E.G：

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

如何在css中继承类

3 个答案: