Question

如何在css中继承属性？我有一节课：

.drop-shadow-red {
    font-size: 1.5vh;
    padding: 0.4vh 0.7vh;
    background: url(../images/redInvert.png) no-repeat center left;
    background-position: 8px 50%;
    background-size: 2vh;
    background-color: rgba(250, 210, 50, 0.9);
    font-weight: bold;
    -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
    -moz-border-radius: 12px 12px 0 0;
    border-radius: 0.1vh 0;
    height: auto;
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
    z-index: 99;
    animation: blinkBorder .6s step-end infinite alternate;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

我现在想创建另一个类.drop-shadow-yellow，其中包含.drop-shadow-red等所有属性，但唯一的变化是background-color为yellow。如何优化代码以避免重复这么多代码，例如：

.drop-shadow-yellow {
    font-size: 1.5vh;
    padding: 0.4vh 0.7vh;
    background: url(../images/redInvert.png) no-repeat center left;
    background-position: 8px 50%;
    background-size: 2vh;
    background-color: yellow; /* <-------------------------------------- */
    font-weight: bold;
    -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
    -moz-border-radius: 12px 12px 0 0;
    border-radius: 0.1vh 0;
    height: auto;
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
    z-index: 99;
    animation: blinkBorder .6s step-end infinite alternate;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

Answer 1

只需创建一个包含background-color所有属性的类，并将其命名为drop-shadow。

现在您只需创建其他类，例如red-bg并添加background-color: red，并将drop-shadow类和背景类传递给对象。

示例：

CSS：

.drop-shadow {
    font-size: 1.5vh;
    padding: 0.4vh 0.7vh;
    background: url(../images/redInvert.png) no-repeat center left;
    background-position: 8px 50%;
    background-size: 2vh;
    font-weight: bold;
    -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
    -moz-border-radius: 12px 12px 0 0;
    border-radius: 0.1vh 0;
    height: auto;
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
    z-index: 99;
    animation: blinkBorder .6s step-end infinite alternate;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}
.red-bg{
    background-color: rgba(250, 210, 50, 0.9);
}

HTML：

<div class="drop-shadow red-bg">Foo Bar!</div>

Answer 2

如果您只想更改一个属性，请执行内联样式并从css中获取其他所有内容。

如何在css中继承属性？

2 个答案: