1

有一个关于使用 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;
}
4

1 回答 1

0

这里的 CSS 有效，诀窍是该页面上有一些 Javascript，它<span>在“Google”中的每个字母周围添加了一个包装器。

CSS专门寻找带有“logo”的第n个span内部。h1class

如果你直接取 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。

于 2013-04-24T02:28:55.897 回答