我可以在同一個元素上使用多個僞選擇器焦點嗎？

Question

我試圖結合使用僞選擇與僞元素來創建自定義工具提示。

我的HTML：

<input id='test'/> 

我的CSS：

#test { 
    position: relative; 
} 

#test:focus { 
    background-color: #08c; 
} 

#test:focus:before { 
    position: absolute; 
    left: 100%; 
    width: 10px; 
    height: 10px; 
    background-color: black; 
} 

運行代碼小提琴：http://jsfiddle.net/9ujEH/

目前集中時作爲#TEST結果輸入將變更爲藍色：重點，但黑色的方位不會像我以爲它會從#test：focus：before之前那樣出現。

Answer 1

僞元件只能在容器中的元素來定義。由於它們在容器內呈現爲DOM元素的方式。輸入不能包含其他元素，因此它們不受支持。另一方面，按鈕雖然是表單元素，但它支持它們，因爲它是其他子元素的容器。現在

More from the 2.1 spec

的::after和::before僞元素使用的是雙冒號，以避免與僞類混亂（這顯然使用:），儘管舊版本的IE（7,8）不會承認雙冒號..記住，如果你想支持他們。

Answer 2

： & 後：之前沒有工作更換元素& input是更換元素。

檢查此http://reference.sitepoint.com/css/replacedelements

Answer 3

這不起作用，因爲input，就像img一樣，元素是void /替換元素，並且沒有「內容」可言，因此看起來沒有地方可以在元素中插入僞元素。

使用div，例如，您可以使用多個僞選擇，如：

div:hover::before { 
    /* CSS */ 
} 

JS Fiddle proof-of-concept。

參考文獻：

• Replaced Elements, from MDN。