84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
任意のセレクターを満たす (または満たさない) 子要素を n 番目ごとに選択する方法はありますか?たとえば、行のサブセット内のすべての奇数のテーブル行を選択したいとします。
table.myClass tr.row:nth-child(odd) { ... }
しかし、:nth-child() は、タイプが「row」であるかどうかに関係なく、すべての tr 要素をカウントするだけのようです。取得したのは 1 つの even "row" 要素であり、探している 2 つの要素ではありません。同じことが :nth-of-type() でも起こります。
:nth-child()
tr
:nth-of-type()
誰か理由を説明できますか?
＃＃＃本当じゃない..＃＃＃
これは独立したセレクターであり、クラスとは結合されません。ルールでは、両方のセレクターを満たす必要があるだけなので、
テーブル行にも.rowクラスがある場合、それが表示されます。
.row
これは非常によくある質問で、:nth-child(An B)と:nth-of-type()の動作方法についての誤解が原因です。
:nth-child(An B)
セレクター レベル 3 では、:nth-child()擬似クラスは、単に一致する兄弟要素であるかだけでなく、同じ親要素の下にあるすべての兄弟要素間の位置を計算します。残りのセレクター。
同様に、:nth-of-type()pseudoclassは、HTML のインジケータ シグネチャである同じ要素タイプを共有する兄弟要素を計算します。残りの要素は計算しません。セレクタ。
これは、同じ親要素のすべての子要素が同じ要素タイプである場合、たとえば、テーブル本体にtr要素のみがあるか、リスト要素にli# のみがあることも意味します。 ## 要素、:nth-child()と:nth-of-type()の動作は同じになります。つまり、An B の各値に対して:nth-child( An B)と:nth-of-type(An B)は、同じ要素セットに一致します。
li# のみがあることも意味します。 ## 要素、
と
の動作は同じになります。つまり、An B の各値に対して
は、同じ要素セットに一致します。
:nth-child()や:not()などの疑似クラスを含む、特定の複合セレクター内のすべての単純なセレクターは、スタンドアロンです。は、セレクターの残りの部分と一致する要素のサブセットを調べる代わりに機能します。
や
などの疑似クラスを含む、特定の複合セレクター内のすべての単純なセレクターは、
個々の複合セレクター内では、単純なセレクター1の間に順序の概念がないことも意味します。これは、たとえば、次の 2 つのセレクターが同等であることを意味します:リーリー
(要点を強調するために、ここでは順序なしリストを使用していることに気づくでしょう)
:nth-child(An B of S)2が任意のセレクター引数 S を受け入れることを許可することで、この制限を修正しようとします。これは、既存のセレクター構文によって決定されるように、セレクターが複合セレクター内で独立して動作するためです。したがって、あなたの場合は次のようになります:リーリー
数年後まで実装されない可能性があります。
tr要素を含む行グループが 1 つだけあると仮定します)。 リーリーに対応する CSS は次のとおりです:
要素を含む行グループが 1 つだけあると仮定します)。 リーリー
Selenium などの自動テスト ツールを使用している場合、または BeautifulSoup などのツールを使用して HTML を解析している場合、これらのツールの多くでは代替として XPath を使用できます。 リーリー
タイプまたはユニバーサル セレクターを指定する場合は、それを最初に指定する必要があります。ただし、これはセレクターの基本的な動作を変更するものではなく、単なる構文の癖に過ぎません。2
当初提案されたのは:nth-match()でしたが、これは依然として、指定されたセレクターを満たす要素ではなく、兄弟に関連する要素のみを計算するためです。したがって、2014 年以降、既存の:nth-child()の拡張機能として再利用されています。
の拡張機能として再利用されています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
＃＃＃本当じゃない..＃＃＃
ドキュメントからの引用これは独立したセレクターであり、クラスとは結合されません。ルールでは、両方のセレクターを満たす必要があるだけなので、
:nth-child(even)テーブル行にも
.rowクラスがある場合、それが表示されます。これは非常によくある質問で、
:nth-child(An B)と:nth-of-type()の動作方法についての誤解が原因です。セレクター レベル 3 では、
:nth-child()擬似クラスは、単に一致する兄弟要素であるかだけでなく、同じ親要素の下にあるすべての兄弟要素間の位置を計算します。残りのセレクター。同様に、
:nth-of-type()pseudoclassは、HTML のインジケータ シグネチャである同じ要素タイプを共有する兄弟要素を計算します。残りの要素は計算しません。セレクタ。これは、同じ親要素のすべての子要素が同じ要素タイプである場合、たとえば、テーブル本体に
実際には、tr要素のみがあるか、リスト要素にli# のみがあることも意味します。 ## 要素、:nth-child()と:nth-of-type()の動作は同じになります。つまり、An B の各値に対して:nth-child( An B)と:nth-of-type(An B)は、同じ要素セットに一致します。:nth-child()
これは、や:not()などの疑似クラスを含む、特定の複合セレクター内のすべての単純なセレクターは、スタンドアロンです。は、セレクターの残りの部分と一致する要素のサブセットを調べる代わりに機能します。個々の複合セレクター内では、単純なセレクター1の間に順序の概念がないことも意味します。これは、たとえば、次の 2 つのセレクターが同等であることを意味します:リーリー
英語に翻訳すると、すべて次の意味になります:(要点を強調するために、ここでは順序なしリストを使用していることに気づくでしょう)
セレクター レベル 4 は、:nth-child(An B of S)
もちろん、まったく新しい仕様でのまったく新しい提案であるため、これは2が任意のセレクター引数 S を受け入れることを許可することで、この制限を修正しようとします。これは、既存のセレクター構文によって決定されるように、セレクターが複合セレクター内で独立して動作するためです。したがって、あなたの場合は次のようになります:リーリー数年後まで実装されない可能性があります。
それまでの間、スクリプトを使用して要素をフィルタリングし、それに応じてスタイルまたは追加のクラス名を適用する必要があります。たとえば、jQuery を使用した一般的な回避策は次のとおりです (テーブルにtr
リーリー要素を含む行グループが 1 つだけあると仮定します)。 リーリーに対応する CSS は次のとおりです:Selenium などの自動テスト ツールを使用している場合、または BeautifulSoup などのツールを使用して HTML を解析している場合、これらのツールの多くでは代替として XPath を使用できます。 リーリー
さまざまなテクニックを使用した他の解決策は、読者の演習として残しておきますが、これは単に簡単で意図的な例にすぎません。 1タイプまたはユニバーサル セレクターを指定する場合は、それを最初に指定する必要があります。ただし、これはセレクターの基本的な動作を変更するものではなく、単なる構文の癖に過ぎません。2
当初提案されたのは:nth-match()でしたが、これは依然として、指定されたセレクターを満たす要素ではなく、兄弟に関連する要素のみを計算するためです。したがって、2014 年以降、既存の:nth-child()
の拡張機能として再利用されています。