9

n番目の子を使用するオブジェクトと一緒にdivを追加すると、バグが発生するようです。

私はこれでどんな助けにも感謝します。

<html>
<style>
.documents > a:nth-child(2) {
    border:1px solid red;
}
</style>

<div class="documents">
    <!-- NO DIVS: WORKS FINE -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
<br />
<div class="documents">
    <div></div><!-- ONE DIV: STARTS WITH THE FIRST OBJECT -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
<br />
<div class="documents">
    <div></div><div></div><!-- TWO DIVS: DOES NOT WORK -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
</html>

http://jsfiddle.net/nwrhU/

4

2 に答える 2

24

これはバグのある動作ではありません。がどのように機能するかについて、よくある誤解がありました:nth-child()。

div先頭に要素を追加すると、a探している は全体で 2 番目の子にはなりません (これが:nth-child(2)意味することです)。これは、 one を追加するdivと、それが最初の子になるためです。次に、最初aの子が 2 番目の子になり、2 番目のa子が 3 番目の子になります。2 番目の を追加するとdiv、それdivが 2 番目の子になり、a要素が同様に別のステップにプッシュされるため、a:nth-child(2)何にも一致しなくなります。

a兄弟の中の他の要素タイプに関係なく、2 番目を探している場合は、a:nth-of-type(2)代わりに使用します。

于 2013-01-29T10:03:22.613 に答える
0

nth-child while count は、すべての子要素を考慮し、選択した要素に一致する要素のみをスタイルします。一方、nth-of-type は、検索している要素に一致する子要素のみをカウントします。

于 2021-07-27T02:23:26.493 に答える