如何使用CSS僞元素：before在同一元素的多個類中

我想用不同的顏色顯示我的徽標文本的字母，但使用span非常粗糙，使用JavaScript會減慢頁面加載時間。所以我嘗試使用CSS僞元素:before，使用多個相同元素的類，但它不起作用。它只顯示最後一班的字母，即letter4。下面是代碼：如何使用CSS僞元素：before在同一元素的多個類中

.letter1:before { 
    content:"Z"; 
    color:red; 
} 
.letter2:before { 
    content:"O"; 
    color:green; 
} 
.letter3:before { 
    content:"N"; 
    color:blue; 
} 
.letter4:before { 
    content:"E"; 
    color:purple; 
}

和HTML：

<span class='letter1 letter2 letter3 letter4'> </span>

我如何工作的呢？

來源

2013-08-27 robinton

那是因爲你只能有一個'：before'每個元素。最後一個覆蓋前一個。 – putvande

請參閱http://stackoverflow.com/editing-help以獲取正確格式化您帖子的幫助。 – BoltClock

你應該像這樣分開http://jsfiddle.net/clink/DBrg5/ –

給你SIR

演示：http://jsfiddle.net/7UjgL/

風格：

.letter{ 
width:40px; 
height:20px; 
position:relative; 
letter-spacing: 26px; 
} 

.letter:first-letter{ 
color:red; 
} 

.letter:before,.letter:after{ 
    position:absolute; 
    top: 0px; 
} 
.letter:before{ 
    content: 'o'; 
    color: green; 
    left: 11px; 
} 

.letter:after{ 
    content:'n'; 
    color:blue; 
    left: 22px; 
}

標記：

<div class=letter>ze</div>

來源

2013-08-27 08:29:35

您應該爲它使用單獨的span元素，因爲從長遠來看它會更具可讀性。

CSS：

.letter1{color:red;} 
.letter2{color:green;} 
.letter3{color:blue;} 
.letter4{color:purple;}

HTML：

<span class='letter1'>Z</span> 
<span class='letter2'>O</span> 
<span class='letter3'>N</span> 
<span class='letter4'>E</span>

來源

2013-08-27 08:18:23

你寫的代碼已經被我使用了，我不想要這個。用css做這件事情：之前不可能？ – robinton

@robinton：這是不可能的。在CSS2.1中，每個元素一次只能有一個'：before'僞元素。 – BoltClock

是的，這是不可能的，因爲：在對HTML元素進行工作之前，不會分開字母，並且每個字母都會被覆蓋。 @putvande已經提到過。 –

如何使用CSS僞元素：before在同一元素的多個類中

回答

相關問題