交差点セレクター交差セレクターは、直接接続された 2 つのセレクターで構成されます。最初のセレクターは要素セレクターで、2 番目のセレクターはクラスセレクターまたは ID セレクターである必要があります。2 つのセレクターは、スペースを入れずに連続して記述する必要があります。 文法: 要素セレクター。クラスセレクター | #IDセレクター { 属性 1: 属性値 1; 属性2: 属性値2; } 構文の説明: 「クラス セレクター | ID セレクター」は、クラス セレクターまたは ID セレクターを使用することを意味します。 例: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title> 交差セレクターを使用してスタイルを設定する</title> <スタイル> /* 要素セレクターは境界線と下余白のスタイルを設定します*/ div { 境界線: 5px 実線の赤; 下マージン:20px; } /* 交差点セレクタの背景色を設定します */ div.txt { 背景:#33FFCC; } /* フォント形式を設定するクラスセレクタ */ 。TXT { フォントスタイル:斜体; } </スタイル> </head> <本文> <div> 要素セレクター効果</div> <div class="txt"> 交差点セレクター効果</div> <span class="txt">クラスセレクター効果</p> </本文> </html> ユニオンセレクターユニオンセレクターは、グループセレクターまたはグループセレクターとも呼ばれ、2つ以上の任意のセレクターで構成されます。異なるセレクターは「,」で区切られ、複数のセレクターの「一括宣言」を実現します。 ユニオンセレクターの特徴は、ユニオンセレクター内の各セレクターに対して設定したスタイルが有効になることです。 結合セレクターの機能は、異なるセレクターから同じスタイルを抽出し、1 か所にまとめて 1 回限りの定義を行うことで、CSS コードの量を簡素化することです。 文法: セレクター1、 セレクター2、 セレクター3、 { 属性 1: 属性値 1; 属性2: 属性値2; } 構文の説明: セレクター タイプは任意で、基本セレクターまたは複合セレクターにすることができます。 例: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title> ユニオンセレクターを使用してスタイルを設定する</title> <スタイル> div { 下マージン:10px; border:3px 赤一色; } スパン { フォントサイズ:26px; } p { フォントスタイル:斜体; } /* ユニオンセレクタを使用して要素の共通スタイルを設定します */ スパン、 .p1, #d1 { 背景:#CCC; } </スタイル> </head> <本文> <div id="d1"> これは DIV1 です</div> <div>これは DIV2 です</div> <p class="p1"> これは段落 1 です</p> <p> これは第2段落です</p> <span>これは SPAN です</div> </本文> </html> 子孫セレクター子孫セレクター (包含セレクターとも呼ばれます) は、指定された要素の子孫要素を選択するために使用されます。子孫セレクターを使用すると、ターゲット要素をより速く正確に見つけることができます。 文法: セレクター 1 セレクター 2 セレクター 3 { 属性 1: 属性値 1; 属性2: 属性値2; } 例: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title>子孫セレクターを使用してスタイルを設定する</title> <スタイル> #box1 .p1 { /* 子孫セレクター */ 背景:#CCC; } #box2 p { /* 子孫セレクター */ 背景:#CFC; } </スタイル> </head> <本文> <div id="box1"> <p class="p1"> 段落 1</p> <p class="p2"> 段落 2</p> </div> <div id="box2"> <p class="p1"> 段落 3</p> <p> 段落 4 </p> </div> <p class="p1"> 段落 5</p> <p> 段落 6 </p> </本文> </html> 子セレクター子孫セレクターは、指定されたタイプの要素のすべての子孫要素を選択できます。要素のすべての子要素のみを選択する場合は、子要素セレクターを使用する必要があります。 文法: セレクタ1> セレクタ2 { 属性1: 属性値1; 属性2: 属性値2; } 構文の説明: 「>」は左結合文字と呼ばれ、その両側にスペースが使用できます。「セレクター 1 > セレクター 2」は、「セレクター 1 で指定された要素であるセレクター 2 で指定されたすべての子要素を選択する」ことを意味します。 例: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title>サブ要素セレクタの使用例</title> <スタイル> h1>スパン{ 色:赤; } </スタイル> </head> <本文> <h1> これは非常に <span> 重要</span> かつ <span> 極めて重要な</span> ステップです。 </h1> <h1> これは本当に <em><span> 重要</span> かつ <span> 極めて重要な</span></em> ステップです。 </h1> </本文> </html> 隣接兄弟セレクターある要素の直後にあり、両方の親要素が同じである要素を選択する必要があるときは、隣接兄弟セレクターを使用できます。 文法: セレクタ1+セレクタ2 { 属性1: 属性値1; 属性2: 属性値2; } 例: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title> 隣接兄弟セレクターの適用例</title> <スタイル> h1+p { 色:赤; フォントの太さ:太字; 上マージン:50px; } p+p{ 色:青; テキスト装飾:下線; } </スタイル> </head> <本文> <h1>これは第 1 レベルの見出しです</h1> <p> これは段落 1 です。 </p> <p> これは第2段落です。 </p> <p> これは第3段落です。 </p> </本文> </html> 属性セレクタCSSでは、属性と属性値に基づいて要素を選択することもできます。このときに使用するセレクターを属性セレクターと呼びます。属性セレクターには主に 2 つの形式があります。 文法: 属性セレクター 1 属性セレクター 2...{ 属性1: 属性値1; 属性2: 属性値2; } 要素セレクター 属性セレクター 1 属性セレクター 2... { 属性1: 属性値1; 属性2: 属性値2; } 構文の説明: 属性セレクターは [属性式] として記述されます。属性式は、属性名または「属性 = 属性値」などの式になります。 属性セレクタの適用: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title>属性セレクターの適用</title> <スタイル> [title]{/* title属性を持つ要素を選択する */ 色: #F6F; } a[href][title]{/* href属性とtitle属性の両方を持つ要素を選択します*/ フォントサイズ: 36px; } img[alt]{/* alt属性を持つimg要素を選択する*/ 境界線: 3px #f00 実線; } p[align="center"]{/* align属性がcenterに等しいp要素を選択する*/ 色: 赤; フォントの太さ: 太字; } </スタイル> </head> <本文> <h2> 属性セレクターのスタイルを適用: </h2> <h3 title="Helloworld">Helloworld</h3> <a title="ホーム"href="#"> ホームに戻る</a><br/><br/> <img src="miaov.jpg" alt="ロゴ" /> <p align="center"> 段落 1</p> <時間 /> <h2> 属性セレクタースタイルは適用されていません <h3>Helloworld</h3> <a href="#"> ホーム ページに戻る</a><br/><br/> <img src="miaov.jpg"> <p align="right"> 段落 2</p> </本文> </html> CSS 複合セレクターの具体的な使い方についてはこれで終わりです。CSS 複合セレクターに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: JavaScriptを使って動的にテーブルを生成するケースの詳しい説明
>>: Dockerコンテナを介してランプアーキテクチャを構築するプロセス
理由は簡単です。 HTML ドキュメントでは、複数の空白文字は 1 つの空白文字と同等です。つまり、...
1. 単一マシン環境の構築# 1.1 ダウンロードZookeeper の対応するバージョンをダウンロ...
序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...
需要シナリオ:上司は、クローラーを使用してMySQLデータベースにデータを書き込んだり更新したり...
この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...
1 ユーザーを作成し、ユーザーのルートパスとパスワードを指定します useradd -d /home...
Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...
データベースのクエリ `学生`から*を選択 クエリ結果id名前誕生日1張三1970-10-01 2李...
この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...
この記事では主に、NUXT の validate メソッドに基づいてフォーム検証を実装する方法につい...
オブジェクトの hasOwnProperty() メソッドは、オブジェクトに特定の独自の (継承され...
目次序文Linux アプリケーション実行中に開いているファイルが多すぎる問題の分析と解決Linux ...
0. 準備: • iTunesを閉じる• タスクマネージャーでiTunesから始まるサービスを終了し...
//MySQL ステートメント SELECT * FROM `MyTable` WHERE `id...
Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例動作フレームワーク...