我應該如何處理CSS繼承難題？

Question

我有一類出現在我的網站上的字形圖像。 很久以前，它們都被稱為glyph 。 它們曾經只出現在一個框中。 該框是一個特定的大小，我使用了一種javascript方法來確保文本始終適合並且字形始終與文本其余部分的高度相同。 這很容易做到，由於我的樣式表，字形以默認值開始。

現在，我決定每頁包含多個帶有可變文本量的框。 每個盒子都有獨立的尺寸。 我嘗試延遲調整大小例程，但這高度依賴於用戶的連接速度。 如果我不運行調整大小的例程，那么看起來根本就不合適，所以我至少想為所有內容選擇默認的起始大小。 當然，在加載之前，您無法使用javascript調整大小。 蛇吃尾巴。

因此，基本上，既然我擁有多個框，每個字形都具有一個字形：1，字形：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代碼中將其轉義，但這確實很麻煩，而且是不必要的。

其次（這是我將比其他答案更進一步的地方），如果您為元素生成唯一的類名，那么您可能做錯了什么。

此處的id屬性為您的元素賦予唯一的名稱； class旨在允許您將相同的一個或多個類應用於多個元素，從而允許您對所有這些元素設置相同的樣式。 您可能已經知道這一點； 我想我想說的是，聽起來您應該使用id而不是class 。

下一步：您說您很確定兩個類名是不允許的，但實際上是允許的。 具有class="glyph bob"是完全允許的，並且您的元素將從class glyph和class bob獲取樣式。 您可以根據需要選擇任意多個類。 但是，我仍然要說的是，如果您要給它們指定唯一的名稱，則應使用ID。

您還要求CSS語法設置所有glyph*類。 再次，您錯了：通過擴展attr語法 ，此語法確實存在：

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

您談論的是延遲調整大小例程，以及由此帶來的問題。 一種解決方案是將項目完全隱藏，直到瀏覽器完成外觀設計為止。 您甚至可以淡化它們到視圖中或使其看起來像是有意的效果。

但是畢竟，我只想知道為什么要在圖像中放置字形並單獨調整其大小？ 聽起來有點奇怪。 您在問題中的描述使我想知道您要達到的目標。

您是否考慮過將可縮放圖形（SVG / VML）或自定義字體用於字形，而不是圖像？ 如果您使用自定義字體，則只需指定正常的字體大小，然后讓瀏覽器即可使用。

希望其中的一些幫助。

Answer 3

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;
}