Question

我们在CSS中定义了一个具有多个属性的样式。

现在我们必须定义一个具有相同属性的新样式，唯一的区别是font-size：而不是20px，它应该是16px。

1）我们应该在CSS中定义一个新样式吗？有没有办法继承其他一切？ 2）或者，我们是否直接在HTML / JSP中覆盖“font-size”。这可以工作，但不是很优雅。

.loading-text {
    font-family: "Trebuchet MS";
    font-size: 20px;
    font-style: bold;
    color: #196198;
    max-width: 450px;
}

.loading-text-smaller {
    font-size: 16px;
}

Answer 1

如果可以的话，我会避免使用！重要的是，它过于激进，应该仅用于极端情况。

使用单独的类并将两个类分配给元素没有任何问题。即：

<span class="loading-text loading-text-smaller">Loading...</span>

Answer 2

您可以一次定义多个CSS类，然后修改其中一个。

.loading-text, .loading-text-smaller {
    font-family: "Trebuchet MS";
    font-size: 20px;
    font-style: bold;
    color: #196198;
    max-width: 450px;
}

.loading-text-smaller {
    font-size: 16px;
}

.loading-text-smaller中的字体大小规则将覆盖第一个定义的规则集。否则，它们将完全相同。

正如其他人所指出的，你也可以在一个元素上使用多个类，并且工作正常。我想添加的是确保在一般类之后添加更具体的类定义。如果您要定义.loading-text-smaller然后定义'.loading-text'，.loading-text中的字体大小规则可能会覆盖先前定义的其他字体大小规则。定义顺序很重要。

Answer 3

如果您对元素使用class="loading-text loading-text-smaller"，那么您的CSS代码将按原样运行。

或者，您可以为多个类添加样式，然后使用后续样式覆盖

.loading-text,.loading-text-smaller {
    font-family: "Trebuchet MS";
    font-size: 20px;
    font-style: bold;
    color: #196198;
    max-width: 450px;
}

.loading-text-smaller {
    font-size: 16px;
}

当元素包含在另一个父类中时，您也可以使用CSS子选择器覆盖属性，例如。

.loading-text {
    font-family: "Trebuchet MS";
    font-size: 20px;
    font-style: bold;
    color: #196198;
    max-width: 450px;
}

.small-parent .loading-text {
    font-size: 16px;
}

在最后一种情况下，如果你有

<div class="small-parent">
    <div class="loading-text">some text</div>
</div>

文字为16px

Answer 4

您可以使用Attribute Selector来设置类名包含字符串'loading-text'的所有元素的样式。这将适用于.loading-text和.loading-text-smaller，而无需将两个类分配给您的元素。

*[class*="loading-text"] {
    font-family: "Trebuchet MS";
    font-size: 20px;
    font-style: bold;
    color: #196198;
    max-width: 450px;
}

.loading-text-smaller {
    font-size: 16px;
}

http://jsfiddle.net/007615c2/

CSS - 改变一个属性，保留所有其他属性

4 个答案: