5

By.cssSelector を使用して、次のような構造を持つクラス c3 で n 番目の dom 要素を取得しようとしています。

<div class="c1">
    <div class="c2">
        <div class="c3">...</div>
    </div>
</div>
<div class="c1">
    <div class="c2">
        <div class="c3">...</div>
    </div>
</div>
<div class="c1">
    <div class="c2">
        <div class="c3">...</div>
    </div>
</div>

CSS セレクターをテストしていて、ますます混乱しています。このセレクターは、c2/c3 の 2 番目のインスタンスを正しく選択します。

.c1:nth-of-type(2)

その間：

.c2:nth-of-type(2)
.c3:nth-of-type(2)

何も選択しません。

さらに悪いことに、これをセレンに変換すると、3つのバージョンすべてで一貫して何も見つからないようです。これらの要素を選択する別の方法はたくさんあります (私はおそらく XPATH を使用するだけです) が、私の理解不足がnth-of-type私を夢中にさせています。2 番目の 2 つが機能しない理由について洞察を提供したり、このセレクターに関する私の基本的な理解の欠如を修正したりできますか?

これは Chrome (29/30) と Firefox (24/25) にありました

4

1 に答える 1

10

どちらを選択したいかはよくわかりませんが、:nth-* 疑似クラスをもっといじる必要があります。を使用して 3 つの c3 をすべて選択する CSS セレクターを次に示します。nth-child()

div.c1 div.c3:nth-child(1)

私が言ったように、どれを選択したいかを実際に指定していません。

しかし、nth-of-type に関する私の理解不足が私を夢中にさせています。2 番目の 2 つが機能しない理由について洞察を提供したり、このセレクターに関する私の基本的な理解の欠如を修正したりできますか?

覚えておくべきことの 1 つは、すべての:nth-*()疑似クラスが親に依存していることです。あなたのセレクターを翻訳させてください：

.c1:nth-of-type(2)

2 番目の子である c1 のクラスを持つものを検索します。

あなたの場合、<body>おそらく親だったので...

<body>
  <div .c1 />
  <div .c1 /> // it highlights this one, because it's the 2nd child of the type ".c1"
  <div .c1 />
</body>

他のセレクターが機能しない理由を説明しましょう。

.c2:nth-of-type(2)との両方.c3:nth-of-type(2)が親のものも見ています。親を指定しているので、親として期待し<body>ています。あなたの場合、<body>親ではありません..です<div .c1 />。実際には、そのセレクターは DOM を探しています -

<body>
  <div .c1 />
  <div .c2 /> // this **would** be the second nth-of-type, but it's not really this way. 
  <div .c1 />
</body>

http://cssdesk.comでさまざまな css セレクターと疑似クラスを 試してみてください。自分で積極的に実験することは非常に役立ちます。あなたはそれを理解するでしょう。

于 2013-11-11T15:17:58.927 に答える