css3セレクター(2)_html/css_WEB-ITnose
css3 セレクター (1) に接続されています
8. 構造擬似クラス セレクター [:nth-child(n)]:nth-child(n) セレクターは、親要素の 1 つ以上の特定の要素と一致するために使用されます。子要素はjqueryと同じです。
ここで、「n」はパラメータであり、整数値 (1,2,3,4)、式 (2n+1、-n+5)、およびキーワード (奇数 [奇数]、偶数 [偶数])、ただしパラメーター n の開始値は 0 ではなく、常に 1 です。つまり、パラメーター n の値が 0 の場合、セレクターは一致する要素を選択しません。
注: ":nth-child(n)" セレクターの n が 式 の場合、n は 0 から計算され、式の値が 0 または 0 未満の場合、何も選択されません一致する要素。以下の表に示すように:
したがって、横断歩道の効果を達成するのは非常に簡単です。
偶数行はオレンジ色になります、ol > li:nth-child(2n|even){background:orange};
奇数行は緑色になります、ol > 1|2n-1| 奇数){背景: 緑;}
9. 構造擬似クラスセレクター [:nth-last-child(n)]:nth-last-child(n) は :nth-child に似ています(n), but has more 後ろから前という意味の最後があり、他の箇所には違いはありません。
例: リスト内の最後から 5 番目のリスト項目の背景色をオレンジに設定します。
<style type="text/css"> ol > li:nth-last-child(5){ background: orange;}</style><ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li></ol>: first-of-type セレクターは :first-child セレクターと似ていますが、違いは が要素の型を指定することです。主に使用される 親要素の下にある特定の型の最初の子要素を見つけるために使用されます。
個人的には、次のように思います。第一子は、第一子の下位区分であり、ケーキの飾りです。例: div コンテナーの最初の p 要素のスタイルを設定します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <style type="text/css"> /*p元素的父元素的第一个子元素是div而不是p元素，因此该样式不起作用*/ p:first-child{ color: red; } /*此时不用first-of-type,更待何时*/ p:first-of-type{ color: blue; } </style> </head> <body> <div class="wrapper"> <div>第一个子元素是div元素</div> <div>第二个div元素</div> <p>第一个p元素</p> <p>第二个p元素</p> </div> </body> </html>
この名前: first-of-type は、型の最初の子要素を表す明らかな子要素が存在しないため、first-type と呼ぶ方がよいと思います。 -child 上記と同様に、nth-last-child(n) は nth-child(n) の拡張です。
11. [:last-of-type] セレクター
:last-of-type セレクターは、:first-of-type と同じ機能を持ちます。違いは、最後の子要素の下にある特定の型と一致することです。要素。例: コンテナ「div.wrapper」内の最後の Div 要素の背景をオレンジに設定します。
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.wrapper > div:last-of-type{ background: orange;}</style></head> <body><div class="wrapper"> <div>我是第一个Div元素</div> <div>我是第二个Div元素</div> <div>我是第三个Div元素</div> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p></div></body></html>
12. [:nth-of-type(n)] セレクター
もう 1 つの of-type、これを見れば理解できるはずです、this:nth-of-type(n) は拡張機能です:nth-child(n) セレクターに追加して、親要素で指定された特定の型の子要素のみをカウントします。要素内の子要素が同じ型ではない場合、:nth-of-type(n) セレクターを使用して、親要素内の特定の型の子要素と一致させると便利です。例: 偶数段落の背景色をオレンジに設定する
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>属性选择器</title><style type="text/css"> .wrapper>p:nth-of-type(even){ background-color:orange; }</style></head> <body><div class="wrapper"> <div>我是一个Div元素</div> <p>我是一个段落元素</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p></div></body></html>
13. [:nth-last-of-type(n)] セレクター
:nth-last-of-type(n) :nth-of-type(n) セレクターと同様に、親要素で指定された特定の子要素タイプを選択しますが、その開始方向は最後の子要素からになります。使用方法は nth-last-child と同じです。 (n )同じです。例: コンテナ「div.wrapper」の最後から 3 番目の段落の背景をオレンジに設定します。
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.wrapper > p:nth-last-of-type(3){ background: orange;}</style></head> <body><div class="wrapper"> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p> <p>我是第四个段落</p> <p>我是第五个段落</p> <div>我是一个Div元素</div> <p>我是第六个段落</p> <p>我是第七个段落</p></div></body></html>
14. [:only-child] セレクター
:only-child は、一見すると要素を選択しており、その要素は親要素の唯一の子要素です。例:
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.post p { background: green; color: #fff; padding: 10px;}.post p:only-child { background: orange;}</style></head> <body><div class="post"> <p>我是一个段落</p> <p>我是一个段落</p></div><div class="post"> <p>我是一个段落</p></div></body></html>
15. [:only-of-type] セレクター
:only-of-type セレクターは、:only-child の拡張であり、特定の種類の子要素を選択し、この子要素を選択します親要素の中でこのタイプの唯一のセレクターです。例: コンテナ内の 1 つの div 要素のみの背景色をオレンジに変更します。
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.wrapper > div:only-of-type { background: orange;}</style></head> <body><div class="wrapper"> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div>我是一个Div元素</div></div></body></html>
この記事の著者は、知識自体が変化しているため、著者は常に学び成長しており、記事の内容も随時更新されます。読者の誤解を避けるため、また出典を容易に追跡できるよう、転載する際には出典を明記してください。ご質問がございましたら、お気軽にご相談ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7349
15
1627
14
1353
52
1265
25
1214
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
