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 - 修改一個屬性，保留所有其他屬性

回答

相關問題