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 モジュールの詳細な説明

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

Ubuntu 18.04 に Apache、MySQL、PHP、LAMP をインストールするための完全なチュートリアル

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

Ubuntu 18.04 に Apache、MySQL、PHP、LAMP をインストールするための完全なチュートリアル

MySQL 5.7 解凍版のインストールとアンインストール、およびよくある問題の概要

WeChatアプレットのオーディオコンポーネントがiOSで再生できない問題の解決策

タグのhref属性とonclickイベントの使用例

Linux プログラムの実行中に動的ライブラリをロードできない場合の解決策

Centos8.3、dockerデプロイメントspringbootプロジェクトの実際のケース分析

docker-maven-pluginを使用してデプロイメントを自動化する方法を説明します

vue3 統合 API における vue2 の $refs の代替方法についての簡単な説明

MySQL における引用符とバックティックの違いと使い方の詳細な説明

WeChatアプレットが左右連携を実現

推薦する

デジタル時計効果を実現するJavaScript

linxu での Svn ワンクリックインストールシェルスクリプトの詳細な説明

Dockerがコンテナを作成した後にホスト名を変更する詳細なプロセス

Vue3はCSSの無限シームレススクロール効果を実装します

MySQL での or ステートメントの使用例

Node-Redを使用してMySQLデータベースに接続する方法

Springboot は、vue+echarts のフロントエンドとバックエンドのインタラクションを使用して、動的なドーナツチャートを実現します。

docker ログが取得できない問題の解決方法

MySQL で UTF-8 エンコーディングを使用しないのはなぜですか?

TypeScript 環境を構築して VSCode にデプロイする詳細な手順

フレックスインサイドボタンの垂直方向の中央揃えが中央揃えにならない問題の解決方法

react+antdプロジェクトをゼロから構築する方法を教えます

Adobe Brackets の簡単な使い方のグラフィックチュートリアル

Alibaba Cloud ServerにMySQLデータベースをインストールする方法の詳細な説明

JavaScript のシングルトンデザインパターン