CSS セレクタのグループ化の簡単な分析

セレクタのグループ化

h2 要素と段落の両方を灰色にしたいとします。これを行う最も簡単な方法は、次のステートメントを使用することです。

h2, p {color:gray;}

ルールは、ルールの左側に h2 セレクターと p セレクターをコンマで区切って配置することで定義されます。右側のスタイル (color:gray;) は、両方のセレクターによって参照される要素に適用されます。カンマは、ルールに 2 つの異なるセレクターが含まれていることをブラウザに伝えます。このコンマがなければ、ルールの意味は完全に異なります。「子孫セレクター」を参照してください。

制限なく、必要な数のセレクターをグループ化できます。

たとえば、多くの要素をグレー表示したい場合は、次のようなルールを使用できます。

body, h2, p, table, th, td, pre, strong, em {color:gray;}

ヒント: グループ化により、作成者は特定の種類のスタイルをまとめて「圧縮」することができ、より簡潔なスタイルシートを作成できます。

次の 2 つのルールセットは同じ結果を実現しますが、どちらが書きやすいかは明らかです。

/* グループ化なし */
h1 {色:青;}
h2 {色:青;}
h3 {色:青;}
h4 {色:青;}
h5 {色:青;}
h6 {色:青;}
/* グループ化 */
h1、h2、h3、h4、h5、h6 {色:青;}

グループ化にはいくつかの興味深いオプションがあります。たとえば、次のルールのグループはすべて同等です。各グループは、セレクターと宣言をグループ化する異なる方法を示しています。

/* グループ 1 */
h1 {色:シルバー; 背景:白;}
h2 {色:シルバー; 背景:グレー;}
h3 {色:白; 背景:灰色;}
h4 {色:シルバー; 背景:白;}
b {色:灰色; 背景:白;}
/* グループ 2 */
h1、h2、h4 {色:シルバー;}
h2、h3 {背景:グレー;}
h1、h4、b {背景:白;}
h3 {色:白;}
b {色:灰色;}
/* グループ 3 */
h1、h4 {色:シルバー; 背景:白;}
h2 {色:シルバー;}
h3 {色:白;}
h2、h3 {背景:グレー;}
b {色:灰色; 背景:白;}

ワイルドカードセレクター

CSS2 では、アスタリスク (*) として表示されるユニバーサルセレクターという新しいシンプルなセレクターが導入されました。このセレクターは、ワイルドカードと同じように、任意の要素に一致します。

たとえば、次のルールはドキュメント内のすべての要素を赤にします。

* {色:赤;}
<html>
<ヘッド>
<スタイル タイプ="text/css">
* {色:赤;}
</スタイル>
</head>
<本文>
<h1>これは見出し 1 です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>
<h4>これは見出し4です</h4>
<p>これは<b>通常の</b>テキストの段落です。 </p>
</本文>
</html>

この宣言は、ドキュメント内のすべての要素をリストするグループ化セレクターと同等です。ワイルドカードセレクターを使用すると、1 回のキー操作 (アスタリスクのみ) で、ドキュメント内のすべての要素の色属性値として赤を指定できます。

宣言のグループ化

セレクターと宣言の両方をグループ化できます。

すべての h1 要素に赤い背景と、高さ 28 ピクセルの Verdana フォントを使用した青いテキストを設定する場合は、次のスタイルを記述します。

h1 {フォント: 28px Verdana;}
h1 {色: 青;}
h1 {背景: 赤;}

ただし、上記のアプローチはあまり効率的ではありません。これは、特に複数のスタイルを持つ要素に対してこのようなリストを作成する必要がある場合に面倒になる可能性があります。代わりに、宣言をグループ化することができます。

h1 {font: 28px Verdana; color: white; background: black;}

これは、前の 3 行のスタイルシートとまったく同じ効果があります。

各ステートメントをグループ化するには、各ステートメントの最後にセミコロンを使用することが重要であることに注意してください。ブラウザはスタイルシート内の空白を無視します。セミコロンを含める限り、次の形式で問題なくスタイルを作成できます。

h1 {
  フォント: 28px Verdana;
  色: 青;
  背景: 赤;
  }

どうでしょうか？上記の文章の方が読みやすいでしょうか？

ただし、2 番目のセミコロンが省略されている場合、ユーザーエージェントはスタイルシートを次のように解釈します。

h1 {
  フォント: 28px Verdana;
  色: 青 背景: 赤;
  }

background は color の有効な値ではなく、color に指定できるキーワードは 1 つだけであるため、ユーザーエージェントは color 宣言全体 (background: black の部分を含む) を無視します。この方法では、h1 見出しは赤い背景なしで青色のみで表示されますが、青い h1 がまったく表示されない可能性が高くなります。代わりに、これらのヘッダーは背景色なしでデフォルトの色 (通常は黒) で表示されます。フォント: 28px Verdana 宣言はセミコロンで正しく終了するため、引き続き正常に機能します。

セレクターのグループ化と同様に、宣言のグループ化はスタイルシートを短縮して、より明確で保守しやすいものにする便利な方法です。

ヒント: ルール内の最後のステートメントの後にセミコロンを置くのも良い習慣です。ルールに別の宣言を追加する場合、別のセミコロンを挿入し忘れる心配はありません。

セレクタと宣言をグループ化して組み合わせる

セレクターのグループ化と宣言のグループ化を 1 つのルールに組み合わせて、非常に少ないステートメントで比較的複雑なスタイルを定義できます。

次のルールは、すべての見出しに複雑なスタイルを指定します。

h1、h2、h3、h4、h5、h6 {
  色:グレー;
  背景: 白;
  パディング: 10px;
  境界線: 1px 黒一色;
  フォントファミリー: Verdana;
  }
<html>
<ヘッド>
<スタイル タイプ="text/css">
h1、h2、h3、h4、h5、h6 {
  色:グレー;
  背景: 白;
  パディング: 10px;
  境界線: 1px 黒一色;
  フォントファミリー: Verdana;
  }
</スタイル>
</head>
<本文>
<h1>これは見出し 1 です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>
<h4>これは見出し4です</h4>
<h5>これは見出し5です</h5>
<h6>これは見出し6です</h6>
</本文>
</html>

セレクタと宣言をグループ化して組み合わせる

次のルールは、すべての見出しに複雑なスタイルを指定します。

h1、h2、h3、h4、h5、h6 {
  色:グレー;
  背景: 白;
  パディング: 10px;
  境界線: 1px 黒一色;
  フォントファミリー: Verdana;
  }

上記のルールは、すべての見出しのスタイルを、白の背景、10 ピクセルのパディング、1 ピクセルの実線境界線の灰色のテキスト、およびテキストフォント Verdana として定義します。

セレクタと宣言をグループ化して組み合わせる

次のルールは、すべての見出しに複雑なスタイルを指定します。

h1、h2、h3、h4、h5、h6 {
  色:グレー;
  背景: 白;
  パディング: 10px;
  境界線: 1px 黒一色;
  フォントファミリー: Verdana;
  }

要約する

上記は私が紹介した CSS セレクターのグループ化です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: JavaScript ES6 モジュールの詳細な説明

>>: ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

CSS セレクタのグループ化の簡単な分析

MySQL 入門 - 概念

mysql+mycat、負荷分散、マスタースレーブレプリケーション、読み取り/書き込み分離操作に基づく安定した高可用性クラスタを構築します。

ico ミラーコードを HTML に追加します (favicon.ico はルートディレクトリに配置されます)

MySQLで適切なインデックスを選択する方法

MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要

MySQLクエリプランでken_lenの値を計算する方法

Vueは適切なスライドアウトレイヤーアニメーションを実装します

5つのクールで実用的なHTMLタグと属性の紹介

js+canvas でコードレイン効果を実現

HTML で入力ボックスに純粋な数字のみを入力するように制限する方法

推薦する

Reactでコンポーネントがどのように通信するかの詳細な説明

Linux で Tomcat を実行するいくつかの方法の説明

Helloダイアログボックスのデザイン体験の共有

JavaScript が重複したネットワークリクエストを防ぐ方法の例

Apache Tomcat と IDEA エディターの統合に関する詳細なチュートリアル

一般的な JavaScript 文字列メソッド 28 個と使用方法のヒントのまとめ

Docker Compose を使用して nginx のロードバランシングを実装する方法

Vue.jsはコンポーネントを通じてアイコンを処理します

nginx を介してローカルでリバースプロキシを構成するプロセス全体

MySQL 5.7.21 解凍版のインストールと設定方法のグラフィックチュートリアル (win10)

Docker の MySQL 時間とシステム時間の不一致の問題を解決する

JavaScript の新しい要素トラバーサルプロパティを使用して子要素をトラバースする方法を学びます

MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル

SSDストレージを有効にしたMySQLインスタンスの詳細な説明

MySQL での coalesce() の使用に関するヒントのまとめ