佔位符CSS調用問題

通常我們使用這個想法（用逗號分隔的不同類）.Test，.test1 {}，但是這裏只有分開調用類才能正常工作。佔位符CSS調用問題

爲什麼會出現這個問題？這裏http://jsfiddle.net/6AR8n/

/* seperate classes */ 

#red input:-moz-placeholder{ 
    color:red; 
} 
#red input::-webkit-input-placeholder{ 
    color:red; 
} 



/* Classes with coma */ 

#green input:-moz-placeholder, input::-webkit-input-placeholder{ 
    color:green; 
} 




<div id="red"> 
    <input type="text" placeholder="Without Coma" > 
</div> 
<br> 
<div id="green"> 
    <input type="text" placeholder="Coma" > 
</div>

來源

2012-12-29 ShibinRagh

當您在標題字段中輸入問題標題時，不必將問題標題輸入到問題主體中。 – BoltClock

問題是什麼？ –

他們不一樣。第二個應該是'#green input：-moz-placeholder，#green input :: webkit-input-placeholder'（逗號的兩邊必須是完整的，'＃green'部分不會自動延續）。 – JJJ

演示這是因爲瀏覽器都應該遇到無法識別的選擇時放棄整個規則。從CSS2.1 spec：

選擇器總是與一個聲明塊一起。當用戶代理無法解析選擇器（即它不是有效的CSS 2.1）時，它必須有ignore選擇器和以下聲明塊（如果有的話）。

這包括前綴的選擇，就像在你的榜樣:-moz-placeholder和::-webkit-input-placeholder，因爲瀏覽器是不應該試圖解析一個前綴，它不支持;對於某個解析器，外部前綴與其他任何語法錯誤一樣無效。

此外，如在評論中提到的#green部分需要在您的逗號分隔的組兩個選擇要複製的，就像這樣：

#green input:-moz-placeholder, #green input::-webkit-input-placeholder{ 
    color:green; 
}

但是，這是完全不相干的手頭上的問題。

來源

2012-12-29 13:52:56 BoltClock

另外，從Firefox 19開始，考慮到'：-moz-placeholder'僞類將被棄用，以支持':: - moz-placeholder'僞元素。順便說一下，前綴特徵不具備未來性。目前，最好通過JavaScript去除'placeholder'屬性，然後用JavaScript來模擬它的功能，以便能夠面向未來的樣式。 –

@Marat Tanalin：''-moz-placeholder'僞類將被棄用，以支持Firefox 19以後的':: - moz-placeholder'僞元素。「**最後。**這已讓我困擾了很多年。你有任何相關的鏈接？ – BoltClock

實際上，某些特徵在語法級別上是否被用作僞類或僞元素通常無關緊要。 ;-)鏈接：https：//developer.mozilla.org/en-US/docs/CSS/：-moz-placeholder; https://developer.mozilla.org/en-US/docs/Firefox_19_for_developers; https://bugzilla.mozilla.org/show_bug.cgi?id=737786。附：很遺憾，在StackOverflow註釋中插入新行是不可能的。 –

佔位符CSS調用問題

回答

相關問題