我應該如何處理這個C​​SS繼承難題？

Question

我有一類叫做字形的圖像，它們通過我的網站出現。曾幾何時，他們都被稱爲glyph。他們過去只出現在一個盒子裏。該框是一個特定的大小，我使用了JavaScript方法來確保文本始終適合，字形總是與文本的其餘部分高度相同。這很容易做到，由於我的樣式表，這些字形開始時都是默認的。

現在，我已決定每頁包含多個包含可變數量文本的框。每個盒子的大小都是獨立的我嘗試了延遲大小調整例程，但這非常依賴用戶的連接速度。如果我沒有運行大小調整例程，那麼事情看起來並不正確，所以我至少希望爲所有內容選擇默認的開始大小。當然，你不能用javascript來調整它的大小，直到它被加載。蛇吃尾巴。因此，基本上，現在我有多個盒子，每個字形都會得到一個類字形：1，glyph：2等。這個數字可以和我網站上用戶提交的項目數量一樣大。 CSS如何處理這個問題？據我所知，這些項目基本上需要兩個類名。但我很確定這是不允許的。

我需要什麼：設置以「字形：」開頭的所有圖像類1EM

這不存在，對不對？字形：*

另外，：在css類名中可能不好用，呵呵？

Answer 1

不要使用：符號。你可以有一個以上的類的元素，以便做到像這樣

<div class="glyph glyph-1">Foo</div> 
<div class="glyph glyph-2">Foo</div> 
<div class="glyph glyph-3">Foo</div> 
<div class="glyph glyph-4">Foo</div> 

Answer 2

CSS類名不能包含:符號。 :之後的所有內容都將被解釋爲僞類（如:hover），並且不會被正確解析。

至於你的課程，爲什麼他們都必須是獨一無二的？類是作出一次選擇多個元素，所以你可以這樣做：

<div class="glyph">Foo</div> 
<div class="glyph">Foo</div> 
<div class="glyph">Foo</div> 
<div class="glyph">Foo</div> 

而且其全部選中了一個選擇：

.glyph { 
    color: red; 
} 

Answer 3

正如其他人所說，你不應該使用在類名的冒號。連字符和破折號是唯一可以使用的標點符號。

可以在類中使用冒號並將它們轉義到您的CSS代碼中，但它變得非常混亂而且沒有必要。其次（這是我會比其他答案更進一步的地方），如果你爲你的元素生成獨特的類名，那麼你可能做錯了什麼。

id屬性是給你的元素一個獨特的名字; class旨在允許您將相同的類（或類）應用於多個元素，從而允許您將所有這些元素設置爲相同。你可能已經知道了;我想我說的是，這聽起來像你應該使用id而不是class。

下一頁：你說你很確定兩個類名是不允許的，但實際上它是允許的。class="glyph bob"是完全可以允許的，你的元素將會從glyph和bob類別中選取樣式。只要你喜歡，你可以有多少班。但是，我仍然會說，如果你想給他們一個獨特的名字，它應該是一個ID。

您還需要CSS語法來設置所有glyph*類。同樣，你就錯了：這句法確實存在，通過extended attr syntax：

[class^="glyph"] { 
    /*styles here for classes beginning with 'glyph' 
} 

你談談延遲大小程序，並介紹了問題。對此的一個解決方案可能是讓這些項目完全隱藏，直到瀏覽器完成了它們的外觀。你甚至可以將它們淡入視野或使其看起來像故意的效果。

但畢竟，我仍然想知道爲什麼你要在圖像中放置字形並獨立調整大小？這一切聽起來有點奇怪;你在問題中的描述讓我想知道你想達到什麼目的。

您是否考慮過使用可縮放圖形（SVG/VML）或自定義字體作爲字形而不是圖像？如果您使用的是自定義字體，則可以簡單地指定字體大小，並讓瀏覽器全部處理。

希望其中的一些是有幫助的。