CSS - 更改一个属性，保留所有其他属性答案

【问题标题】：CSS - Alter one attribute, keep all othersCSS - 更改一个属性，保留所有其他属性
【发布时间】：2014-09-02 16:32:10
【问题描述】：

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

现在我们必须定义一个新样式，具有相同的属性，唯一的区别是字体大小：而不是 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;
}

【问题讨论】：

只需将两个类都分配给元素class="loading-text loading-text-smaller"
谢谢。没想到；）

标签： html css

【解决方案1】：

如果可以的话，我会避免使用 !important，它过于激进，应该只在危急情况下使用。

拥有一个单独的类并将两个类都分配给元素并没有错。即：

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

【讨论】：

【解决方案2】：

如果您在元素上使用 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>

文本将是 16 像素

【讨论】：

【解决方案3】：

您可以一次定义多个 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 中的字体大小规则可能会覆盖之前定义的其他字体大小规则。定义顺序很重要。

【讨论】：

【解决方案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/

【讨论】：