css - 使用 css 选择器 nth-of-type 不起作用

Question

关于使用 css nth-of-type 选择器有一个很好的例子 http://codepen.io/mnafricano/pen/ltKvy ，但是当我自己运行这个例子时，我无法让它工作。有人能指出使用 nth-of-type 有什么问题吗

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;
}

Answer 1

此处的 CSS 有效，诀窍在于该页面上有一些 Javascript 添加了 <span>将“Google”中的每个字母包裹起来。

CSS 专门寻找第 n 个 span在h1里面与 class “标志”。

如果你直接拿 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 .