<p>その位置に基づいてリスト內(nèi)の特定の要素をターゲットにしたい場合:nth-child()は、CSSで最も有用な擬似クラスの1つです。兄弟のグループの中ですべてのnth要素を選択できます。たとえば、テーブル內(nèi)の他のすべての行やリストの色を変更します。
<p>これがどのように機(jī)能し、いつ使用するかです。
基本的な構(gòu)文を理解する
<p>基本構(gòu)造は次のようになります：要素：nth-??child（n）{
/ *ここのスタイル */
}<p>これにより、要素の種類に関係なく、 n番目の子供が選択されます。したがって、 li:nth-child(2)を書くと、その子供が<li>である場合にのみ、親の2番目の子と一致します。それが<div>または何か他のものである場合、それは一致しません。<p> nの共通値は次のとおりです。- <li>
1 - 最初、2番目、3番目3アイテムなどを選択します2<li> odd - すべての奇妙な子供を選択します（1番目、3番目、5番目…）<li> even - すべての偶數(shù)の子供を選択します（2、4、6番目…） TR：nth-??child（偶數(shù)）{
バックグラウンドカラー：＃f2f2f2;
}<p>これにより、すべての均等なテーブル列に明るい灰色の背景が與えられます。 n 3や2n 1などの式を使用します
<p>:nth-child() 、 an bの形式の式も受け入れます。<p>これがどのように崩壊するかは次のとおりです。- <li>
aは間隔です（2番目、3番目などのように）<li> bはオフセットです- <li>
2n 1 → oddと同じ<li>2n → evenと同じ<li>3n →3人の子供ごと<li>n 4 →4番目の子供から始まります li：nth-??child（3n）{
色：赤;
}<p>これにより、3、6、9などが赤くなります。<p>または、5番目のアイテム以降のスタイリングを開始したい場合： Li：nth-??child（n 5）{
font-weight：bold;
}違い:nth-child()と:nth-of-type()
<p>これら2つを混亂させるのは簡単ですが、重要な違いは次のとおりです。- <li>
:nth-child()タグの種類に関係なく、すべての子供を數(shù)えます。<li> :nth-of-type()同じタイプの要素のみをカウントします。<div> <p>パラグラフ1 </p> <span> span </span> <p>パラグラフ2 </p> </div><p>それから：
P：nth-??child（3）{color：red; }<p> …3番目の子供は<p>であるため、機(jī)能します。しかし： P：nth-??child（2）{color：blue; }<p> …2番目の子供は<p>ではなく<span>であるため、何も適用しません。<p>代わりに使用した場合： P：nth-??of-type（2）{color：blue; }<p> …他のタグが混在しているにもかかわらず、リスト內(nèi)の2番目の<p>であるため、「パラグラフ2」をターゲットにします。
実際のユースケース
<p>ここにいくつかの現(xiàn)実世界の狀況があります:nth-child()は輝いています：
-
<li> Zebra-Stripeテーブル：読みやすくするための代替行の背景。
<li>
ギャラリーレイアウト：他のすべての畫像にさまざまなスタイルまたはマージンを適用します。
<li>
ナビゲーションメニュー：余分なクラスなしで最後のいくつかのアイテムを別の方法でスタイリングします。
<li>
フォームレイアウト： 3分の1の入力フィールドごとにスペースを出すか、アライメントします。
<p>基本的にそれだけです。式と一致するロジックを理解している限り、
:nth-child()マスターするのは難しくありません。重要なのは、ハードパッチ式ではなく、実際の構(gòu)造で柔軟に使用することです。以上が：nth-??child（）pseudoclassを使用する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。
Nov 20, 2023 am 11:20 AM
:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。具體的なコード例は次のとおりです。 HTML コード: <divid="container" ><divclass="item"> ;最初の子要素</div><divclass="item"&
css擬似セレクター學(xué)習(xí)擬似クラスセレクター解析
Aug 03, 2022 am 11:26 AM
前回の記事「Css擬似セレクターの學(xué)習(xí) - 擬似要素セレクターの解析」では擬似要素セレクターについて學(xué)習(xí)しましたが、今回は擬似クラスセレクターについて詳しく見ていきます。
:active 擬似クラス セレクターを使用して、マウス クリック効果の CSS スタイルを?qū)g裝します。
Nov 20, 2023 am 09:26 AM
:active 疑似クラス セレクターを使用してマウス クリック効果を?qū)g現(xiàn)する CSS スタイル CSS は、Web ページのパフォーマンスとスタイルを記述するために使用されるカスケード スタイル シート言語です。 :active は CSS の疑似クラス セレクターで、マウスをクリックしたときに要素の狀態(tài)を選択するために使用されます。 :active 擬似クラス セレクターを使用すると、クリックされた要素に特定のスタイルを追加して、マウス クリック効果を?qū)g現(xiàn)できます。以下は、:active 疑似クラス セレクターを使用してマウス クリック効果を?qū)g現(xiàn)する方法を示す簡単なサンプル コードです。
疑似クラスと疑似要素の違いは何ですか?
Dec 05, 2023 am 11:24 AM
疑似クラスと疑似要素の違いは次のとおりです: 1. 疑似クラスは特定の要素に特殊効果を追加するために使用されますが、疑似要素は特定の要素の前後にコンテンツやスタイルを追加するために使用されます; 2. 疑似要素 クラスは通常、表現(xiàn)されます。単一のコロン「:」で表されますが、疑似要素は通常、二重コロン「::」で表されます。
Web の疑似クラスと疑似要素とは何ですか
Oct 12, 2023 pm 01:28 PM
Web の疑似クラスと疑似要素は、特定の要素を選択してスタイル設(shè)定するために使用される CSS セレクターの特別な形式です。詳細(xì)な説明: 1. 疑似クラスは、要素の特定の狀態(tài)または動作を選択するために使用されるセレクターです。コロン (:) で始まり、要素に追加のスタイルを追加するために使用されます。2. 疑似要素は、要素のコンテンツの前または前。生成されたコンテンツの後に挿入される、二重コロン (::) で始まるセレクターは、HTML 構(gòu)造にない追加のコンテンツを作成するために使用されます。
疑似要素と疑似クラスの違いは何ですか?
Oct 09, 2023 pm 02:48 PM
疑似要素と疑似クラスの違いは次のとおりです。 1. 疑似クラスは要素の特定の狀態(tài)または位置を選択するために使用されるセレクターですが、疑似要素は要素のコンテンツの前後に追加のコンテンツを挿入するために使用されるセレクターです。 ; 2. 疑似クラスの機(jī)能は、要素の狀態(tài)または位置に応じて要素のスタイルを変更することですが、疑似要素の機(jī)能は、要素のコンテンツの前後に追加のコンテンツを挿入し、そのスタイルを変更することです。 。
CSS :target 擬似クラスセレクターのさまざまなアプリケーションシナリオを?qū)g裝する
Nov 20, 2023 am 08:26 AM
CSS:target 擬似クラス セレクターのさまざまなアプリケーション シナリオを?qū)g裝するには、特定のコード サンプルが必要です。CSS:target 擬似クラス セレクターは、アンカー ポイント (#) に基づいて特定の要素を選択できる、一般的に使用される CSS セレクターです。 URL。この記事では、この疑似クラス セレクターを使用する実際のアプリケーション シナリオをいくつか紹介し、対応するコード例を示します。ページ內(nèi)ナビゲーション リンク スタイルの切り替え: ユーザーがページ內(nèi)のナビゲーション リンクをクリックすると、:target 擬似クラス セレクターを使用して、現(xiàn)在クリックされているリンクを選択できます。
CSS の疑似クラスと疑似要素の高度なアプリケーション スキルと実踐的な事例共有をマスターします。
Dec 23, 2023 am 08:52 AM
CSS の疑似クラスと疑似要素の高度な応用スキルと実踐例をマスターします。フロントエンド開発において、CSS は Web ページを美しくし、ユーザー エクスペリエンスを向上させるために使用できる必須の技術(shù)です。 CSS では、疑似クラスと疑似要素は、開発者が特殊効果を?qū)g現(xiàn)し、Web ページをより豊かで多様性のあるものにするのに役立つ非常に強(qiáng)力なツールです。この記事では、疑似クラスと疑似要素に関する高度なアプリケーション スキルと実踐的なケースをいくつか紹介し、対応するコード例を示します。 1. 疑似クラス: hover 疑似クラス: ユーザーがマウスを移動するときに hover 疑似クラスが使用されます
