使用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选择器类型不起作用

回答

相关问题