在CSS中是否有任何僞選擇器來選擇一個字母：hover？

Question

我想重現此，只是CSS：

http://jsfiddle.net/g32Xm/

$(function(){ 
    var text = $('h2').text(); 
    var atext = text.split(""); 
    var newText = ''; 
    for(var i=0; i< atext.length; i++){ 
     newText += '<span>'+ atext[i]+'</span>'; 
    } 
    $('h2').html(newText); 

}); 

CSS

h2 span:hover{ 

     position:relative; 
     bottom:3px; 
    } 

是否有不進化得只剩JavaScript的解決方法嗎？和（我忘了提），而把跨度在HTML

在此先感謝

Answer 1

CSS僅適用於一般選擇，在文本節點不是單個字母。使用現代CSS，您可以使用:first-letter僞元素，但據我所知，這是關於儘可能去設計單個字符的樣式。唯一的方法是將每個字符包裝在一個單獨的元素中（可能是span）並使用它。

所以，爲了減少冗長的答案：截至目前，沒有，只有CSS才能做到這一點。

Answer 2

，你都可以在包裝手動跨度的每一個字符，並避免使用JavaScript這樣：

HTML

<h2> 
<span>M</span><span>a</span><span>n</span><span>d</span><span>a</span><span>r</span><span>i</span><span>n</span><span>a</span> 
<span>L</span><span>i</span><span>m</span><span>ó</span><span>n</span> 
</h2> 

CSS

h2 > span:hover{ 

    position:relative; 
    bottom:3px; 
} 

JSFiddle example