Question

这是标题的css：

.head_red{
    background-image: url(../../Images/box_header_red.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

.head_blue{
    background-image: url(../../Images/box_header_blue.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

.head_green{
    background-image: url(../../Images/box_header_green.png) !important;
    background-repeat:no-repeat;
        height: 59px;
}

.head_yellow{
    background-image: url(../../Images/box_header_yellow.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

.head_orange{
    background-image: url(../../Images/box_header_orange.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

继承这个类的正确方法是什么，所以我只需要在每个类中添加背景图像？

Answer 1

CSS

.head { background-repeat:no-repeat; height: 59px; }
.head_red{ background-image: url(../../Images/box_header_red.png); }
.head_blue{ background-image: url(../../Images/box_header_blue.png); }
.head_green{ background-image: url(../../Images/box_header_green.png); }
.head_yellow{ background-image: url(../../Images/box_header_yellow.png); }
.head_orange{ background-image: url(../../Images/box_header_orange.png); }

示例HTML

<div class="head head_red">sample</div>
<div class="head head_blue">sample</div>
<div class="head head_yellow">sample</div>

Answer 2

尝试制作另一个课程：

<div class="head head_green"></div>
<div class="head head_red"></div>
<div class="head head_blue"></div>

和..

.head {
    height: 59px;
    background-repeat: no-repeat;
}

然后从当前代码中删除这些样式

Answer 3

分配多个类：

<强> CSS

.head {
    background-repeat: no-repeat;
    height: 59px;
}

.head--red{
    background-image: url(../../Images/box_header_red.png) !important;
}

.head--blue{
    background-image: url(../../Images/box_header_blue.png) !important;
}
/* ... */

<强> HTML

<div class="head head--red"></div>
<div class="head head--blue"></div>

--只是一个命名惯例。

Answer 4

在头元素中添加另一个类。为了论证，我们称之为head。

所以你的HTML看起来有点像这样：

<div class='head head_red'>
            ^^^^
          new bit

现在，您可以使用常用属性设置.head样式，并保留背景图像的样式。

.head {
    background-repeat:no-repeat;
    height: 59px;
}

.head_red{
    background-image: url(../../Images/box_header_red.png);
}
....etc....

希望有所帮助。

（注意：我已经把!important带走了，因为你不需要它;如果你确实需要它，请随意把它重新放入，但也要考虑找出你需要它的原因并纠正这一点，因为!important应该被视为最后的手段;它不是你想要在正常使用中有很多东西的东西）

你如何在CSS中正确继承？

4 个答案: