2

これは機能します： 

#sList li:visible {
    background: rgba(255,255,136,0.5);
}

これは機能します：

#sList li:nth-of-type(odd) {
    background: rgba(255,255,136,0.5);
}

これはしません:

#sList li:visible:nth-of-type(odd) {
    background: rgba(255,255,136,0.5);
}

うーん...何か助けて？

編集: 詳しく説明します — その下に.keyup— フィルターをかける検索フィールドがあり<ul>ます。

偽の Google インスタント検索タイプのことを考えてみてください。背景の色をずらしたい。それらはページが読み込まれるときですが、入力を開始して要素がリストから削除され始めるとすぐに、特定の要素が非表示になるため、ゼブラ ストライプの背景パターンが消えて一貫性がなくなります。.keyupリストが一貫して縞模様のままになるように、すべての検索フィールドでゼブラ縞模様が再適用される何かをしたかったのです。

わかる？

4

2 に答える 2

0

SitePoint の疑似クラスのリストによると、:visible はありません。代わりに:hoverを使用した例を使用してみましょう。

デモ

リストがある場合、2 つのクラスを使用して、要素が奇数の子であり、ホバーされている場合にのみ、それを強調表示することができます。ホバリング時に ipsum は強調表示されませんが、Lorem は強調表示されることに注意してください。

#sList3 li:hover:nth-of-type(odd) {
    background: rgba(255,255,136,0.5);
}

<ul id="sList3">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>Lorem</li>
  <li>ipsum</li>
  <li>Lorem</li>
  <li>ipsum</li>
  <li>Lorem</li>
  <li>ipsum</li>
</ul>
于 2012-04-05T15:07:37.050 に答える
0

:nth-of-type要素のタグ タイプのみを考慮します。この疑似セレクターにn番目に一致した要素を選択させる方法はありません。

また、:visible有効な疑似セレクターではありません。

于 2012-04-05T14:59:35.183 に答える