CSS中段落中的重複顏色模式

我有一個段落標記，並且我希望其中的文字每隔一個字母橙色，其餘字母都是深橙色。懶惰的代碼如下所示：CSS中段落中的重複顏色模式

的Html

<p> 
    <span class='orange'>L</span> 
    <span class='yellow'>o</span> 
    <span class='orange'>r</span> 
    <span class='yellow'>e</span> 
    <span class='orange'>m</span> 
</p>

的CSS

.yellow { 
    color: darkorange; 
} 

.orange { 
    color: orange; 
}

Fiddle（第二顏色變爲藍色引人注目）

我怎樣才能讓這個代碼看起來更小懶？我知道當你第一次讀到這個問題時，你可能會認爲「不可能，只能用巫術來完成」，但我認爲這應該很簡單。我會處理任何事情，即使是在整個文本中重複圖像的方式。

來源

2014-09-04 Cilan

使用這個'.yellow {color：blue; blue; }'進行測試。差異將更加明顯。 :) – 2014-09-04 22:18:18

@curiosu很好，我只是不想讓人們覺得我在用戶體驗上很糟糕。 – Cilan 2014-09-04 22:19:29

@showdev讓我澄清。 ***我想CSS！***對不起，不把它放在我原來的帖子:( – Cilan 2014-09-04 22:21:22

在CSS中，您不能定位字符數據內容的單個字母，只能定位元素和僞元素的一小部分。因此你需要標記。你應該從來沒有在類中使用表示名稱，這是CSS的工作。因此，使用匿名semanticless內聯元素<span>沒有進一步的細節，然後只需使用先進的CSS選擇：

<p> 
    <span>L</span> 
    <span>o</span> 
    <span>r</span> 
    <span>e</span> 
    <span>m</span> 
</p>

和CSS：

p { 
    color:orange; 
} 
p span:nth-child(odd) { 
    color:yellow; 
}

Seen here in action。

來源

2014-09-04 22:53:28

有了這個，我不能離開所有其他字母，而不是一個跨度，並且省去了'n-child'嗎？ – Cilan 2014-09-05 22:18:29

是的，我離開了所有爲了完整起見，但這也確實起作用 – 2014-09-06 08:21:18

我知道我不應該關心這個微觀優化，但可以把所有內容放在一個跨度中，並刪除段落中的顏色設置，並添加'n-child（甚至）'使css加載更快？ – Cilan 2014-09-06 14:03:45

CSS中段落中的重複顏色模式

回答

相關問題