使用CSS選擇器類型不起作用

有一個關於使用css nth類型選擇器http://codepen.io/mnafricano/pen/ltKvy的很好的例子，但是當我自己運行例子時，我無法使它工作。有人能指出什麼不順心，使用第n-的型使用CSS選擇器類型不起作用

的HTML是 <h1 class='logo'>Google</h1> 和CSS是

h1.logo span:nth-of-type(1){ 
    color:#0089ab; 
} 
h1.logo span:nth-of-type(2){ 
    color:#d91821; 
} 
h1.logo span:nth-of-type(3){ 
    color:#ffac05; 
} 
h1.logo span:nth-of-type(4){ 
    color:#0089ab; 
} 
h1.logo span:nth-of-type(5){ 
    color:#88c406; 
} 
h1.logo span:nth-of-type(6){ 
    color:#d91821; 
}

來源

2013-04-24 user824624

是什麼讓你覺得它不起作用？ – 2013-04-24 02:25:23

'h1.logo'是否有任何''元素？ – Blender 2013-04-24 02:27:24

這裏的CSS工作，關鍵是，有一些JavaScript上該頁面在「Google」中的每個字母周圍添加了一個<span>包裝。

該CSS具體是尋找spanh1class「徽標」內的第span。

如果您直接採用HTML和CSS，但不是JS，CSS規則永遠不會匹配。

如果檢查h1，你會看到以下內容：

<h1 class="logo"> 
    <span class="char1">G</span> 
    <span class="char2">o</span> 
    <span class="char3">o</span> 
    <span class="char4">g</span> 
    <span class="char5">l</span> 
    <span class="char6">e</span> 
</h1>

如果您嘗試HTML相反，它應該像您期望的工作。

這是JSFiddle that may help。

來源

2013-04-24 02:28:55

使用CSS選擇器類型不起作用

回答

相關問題