nth-child(N)セレクタ
1825 ワード
nth-child(an+b)について話します.
nth-child()というものは、CSS 3の中の偽クラス選択子で、jQueryも持ってきました.
国内翻訳教材「jQuery基礎教程」にこんな翻訳がある.初めてこの文を読むと、なんだか理解しにくいので、googleの衝動に駆られました(ここではBSを強くして教育網を見ると、カタツムリよりもネットの速度が遅く、googleを開くのに半日も待たなければなりません.ダウンロードは基本的に1 Bye/5 s程度で、jQuery中国語コミュニティにもアクセスできません.)
一晩中検索した後、中国語版の解釈は以下の通りです.
親要素の下のN番目のサブ要素に一致し、もちろんan+bをoddまたはevenに置き換えることもできます.この場合、親要素の下の奇(偶)要素に一致することを意味します.eq(index)との違いは、eq(index)が1つの要素にのみ一致することである.nth-child()は、親要素ごとに子要素を一致させます.nth-childは1から始まり、eq()は0から計算されます!
CSSのチュートリアルでnth-child()のパラメータはan+bで、w 3.orgの記述は、中国語で書くとめまいがする可能性が高いうえ、筆者の文章のレベルが限られているので、an+bの言い方を避けて、5つの書き方の5つの部分に分割して説明することにしました(詳しくはhttp://www.webjx.com/css/divcss-10232.html).完全な文章を読んだ後、その理解はまだぼんやりしていて、その後に与えられた例は私の実験と直接矛盾しています(後に分析すると、彼の実験にはelementのネストがないためです).
そこで英語の原版を見つけるしかなかった.
The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for a given positive integer or zero value of n.
「in the document tree」という言葉に注意してください.なぜそんなに多くの中国語の翻訳でこの言葉を消したのか分かりませんが、それは確かに理解しています.
個のセレクタが重要です.
では、このセレクタを再理解しましょう.パラメータan+bが表す意味はこれ以上深く研究しないで、$('div:nth-child(2))で例を挙げます.
私たちのdivツリー(in the document tree)で、1(an+b-1)人の兄(siblings before it)を持つdivをすべて選択します.
(element).この場合、選択した結果はelement集合であるはずです.
実は、「ツリー」という概念を組み合わせると、nth-child()という選択子はよく理解されています.次の図を示します.
図1 div:nth-child(1)とdiv:nth-child(2)で選択した要素の例
私たちの家族関係をイメージするとnth-child(N)は私たちの家族の中ですべての古いNの集合を選んだ.
上の2つの文を使って、すべてのdivのフォントの色は赤と青の間隔で現れますか?答えはもちろん:いいえ.
参考文献:
《Selectors W3C Working Draft 15 December 2005》http://www.w3.org/TR/css3-selectors/#nth-child-pseudo,2005.10.15
nth-child()というものは、CSS 3の中の偽クラス選択子で、jQueryも持ってきました.
国内翻訳教材「jQuery基礎教程」にこんな翻訳がある.初めてこの文を読むと、なんだか理解しにくいので、googleの衝動に駆られました(ここではBSを強くして教育網を見ると、カタツムリよりもネットの速度が遅く、googleを開くのに半日も待たなければなりません.ダウンロードは基本的に1 Bye/5 s程度で、jQuery中国語コミュニティにもアクセスできません.)
一晩中検索した後、中国語版の解釈は以下の通りです.
親要素の下のN番目のサブ要素に一致し、もちろんan+bをoddまたはevenに置き換えることもできます.この場合、親要素の下の奇(偶)要素に一致することを意味します.eq(index)との違いは、eq(index)が1つの要素にのみ一致することである.nth-child()は、親要素ごとに子要素を一致させます.nth-childは1から始まり、eq()は0から計算されます!
CSSのチュートリアルでnth-child()のパラメータはan+bで、w 3.orgの記述は、中国語で書くとめまいがする可能性が高いうえ、筆者の文章のレベルが限られているので、an+bの言い方を避けて、5つの書き方の5つの部分に分割して説明することにしました(詳しくはhttp://www.webjx.com/css/divcss-10232.html).完全な文章を読んだ後、その理解はまだぼんやりしていて、その後に与えられた例は私の実験と直接矛盾しています(後に分析すると、彼の実験にはelementのネストがないためです).
そこで英語の原版を見つけるしかなかった.
The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for a given positive integer or zero value of n.
「in the document tree」という言葉に注意してください.なぜそんなに多くの中国語の翻訳でこの言葉を消したのか分かりませんが、それは確かに理解しています.
個のセレクタが重要です.
では、このセレクタを再理解しましょう.パラメータan+bが表す意味はこれ以上深く研究しないで、$('div:nth-child(2))で例を挙げます.
私たちのdivツリー(in the document tree)で、1(an+b-1)人の兄(siblings before it)を持つdivをすべて選択します.
(element).この場合、選択した結果はelement集合であるはずです.
実は、「ツリー」という概念を組み合わせると、nth-child()という選択子はよく理解されています.次の図を示します.
図1 div:nth-child(1)とdiv:nth-child(2)で選択した要素の例
私たちの家族関係をイメージするとnth-child(N)は私たちの家族の中ですべての古いNの集合を選んだ.
， ：
$('div:nth-child(odd)').css("color","red");
$('div:nth-child(even)').css("color","blue");上の2つの文を使って、すべてのdivのフォントの色は赤と青の間隔で現れますか?答えはもちろん:いいえ.
参考文献:
《Selectors W3C Working Draft 15 December 2005》http://www.w3.org/TR/css3-selectors/#nth-child-pseudo,2005.10.15