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

我们在CSS中定义了一种具有多个属性的样式。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; 
}

来源

2014-09-02 gene b.

刚分配两个类的元素，'类=“加载文本加载文本，更小的” ' – j08691 2014-09-02 16:35:21

谢谢。没有想到这一点;） – 2014-09-02 16:38:48

你的CSS代码一样工作是，如果你使用你的元素class="loading-text loading-text-smaller"。

或者，您可以添加样式多个类，然后用随后的风格

.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的

来源

2014-09-02 16:42:22 CupawnTae

您可以一次定义多个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中的font-size规则将覆盖设置第一个定义的规则。否则，它们将是相同的。

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

来源

2014-09-02 16:36:12

我会尽量避免使用！重要的是，如果可以的话，它太过分了，应该只能用在可怕的情况下。

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

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

来源

2014-09-02 16:37:02 trysmudford

你可以使用一个Attribute Selector样式谁的类名包含字符串“载文”所有元素。这将适用于.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/

来源

2014-09-02 16:41:48 Moob

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

回答

相关问题