ホームページ > 記事 > ウェブフロントエンド > 第一子に関するちょっとした知識
今日「Sharp jQuery」という本を読んでいると、フィルターセレクターに関するセクションがありました。私の注意を引いた知識点があります。
(本では例としてまったく同じコードを使用していません) 簡単な例を見てみましょう - コード:
1 <ul>2 <li>第一个li</li>3 <li>第二个li</li>4 <li>第三个li</li>5 <li>第四个li</li>6 </ul>
最初の li の色を青にしたい場合は、指定されたメソッドを使用します。この本の中で $(" ul :first-child").css("color","blue");
(追記: オンラインで紹介されている jQuery を使用しています: )
この時、私の最初の反応は $("ul :first-child" という文だった) ) 息子の li ではなく、ul を選択しました。オンラインで例を探したところ、この状況での一般的な書き方は次のとおりでした。 $("ul li:first-child").
では、この本の書き方は間違っているのでしょうか?エディタでテストしたところ、問題は $("ul :first-child") の後にあることが判明しました。スペースを削除すると、ul が実際に選択されます。 えー。 。 。この詳細。 。 。 。将来的には ul+space と ul li のどちらを使用したほうがよいでしょうか。これは必要になるかもしれません (笑)。結局のところ、$("ul :first-child") は $("ul li:first-child") より li が 1 つ多いのです。条件はさらに厳しい!例を変更します
<ul> <p>lala</p> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li></ul>
同じ状況で、 $("ul :first-child").css("color","blue") と $("ul li:first-child") を変更します。 css ("color","blue") では、前者はララブルーになり、後者は効果がありません。結局のところ、li は長男ではありません (王子にはなれない (笑))。
以上が第一子に関するちょっとした知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。