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

<span>ここの CSS は機能します。秘訣は、「Google」の各文字の周りにラッパーを追加する Javascript がそのページにあることです。

spanCSS は具体的には、h1with class"logo"の n 番目を探しています。

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 に答える