爲什麼我不能將僞類元素的顏色設置爲紅色？

這裏是我的測試代碼：http://jsfiddle.net/kongakong/n41zm2s7/4/爲什麼我不能將僞類元素的顏色設置爲紅色？

HTML：

<div class='test'> 
    <div class="icon icon-test">Testing</div> 
</div>

減：

.icon-test { 
    font-family: 'Open Sans'; 
    speak: None; 
} 

.icon-test:before { 
     content:"-"; 
} 

.test { 
    .icon { 
     color:red; 
    } 

}

這是編譯

.icon-test { 
    font-family: 'Open Sans'; 
    speak: None; 
} 
.icon-test:before { 
    content: "-"; 
} 
.test .icon { 
    color: red; 
}

我期待改變的顏色字符' - '變爲紅色。這些代碼有什麼問題？

來源

2015-10-14 Anthony Kong

只是用'.icon試驗：前{ 內容：「 - 」; 顏色：紅色; }' –

jsFiddle不支持LESS（雖然在標籤中有[less]]，但您在CSS中的錯誤標識爲CSS）。這就是爲什麼。它應該正常工作。 – BoltClock

jsFiddle支持SCSS，但必須在「Languages」中啓用：http://jsfiddle.net/n41zm2s7/3/ – Oriol

首先，您的CSS面板內的內容無效。接下來，如果您只想更改僞元素的顏色，請將color屬性添加到.icon-test:before規則中。

.icon-test { 
 
    font-family: 'Open Sans'; 
 
    speak: None; 
 
} 
 
.icon-test:before { 
 
    content: "-"; 
 
    color: red; 
 
}

<div class='test'> 
 
    <div class="icon icon-test">Testing</div> 
 
</div>

來源

2015-10-14 03:17:36

它將所有文本更改爲紅色。我只想要' - '更改 –

答案已更新。 –

爲什麼我不能將僞類元素的顏色設置爲紅色？

回答

相關問題