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，它在“Google”中的每个字母周围添加了<span>包装。

CSS专门在span内部h1寻找带有class“徽标”的第h1条。

如果您直接使用HTML和CSS，而不是JS，那么CSS规则永远不会匹配。

如果您检查<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>，您会看到以下内容：

{{1}}

如果您尝试使用该HTML，它应该可以正常运行。

这是JSFiddle that may help。

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

1 个答案: