CSS セレクタのグループ化の簡単な分析
|
セレクタのグループ化 h2 要素と段落の両方を灰色にしたいとします。これを行う最も簡単な方法は、次のステートメントを使用することです。 ルールは、ルールの左側に h2 セレクターと p セレクターをコンマで区切って配置することで定義されます。右側のスタイル (color:gray;) は、両方のセレクターによって参照される要素に適用されます。カンマは、ルールに 2 つの異なるセレクターが含まれていることをブラウザに伝えます。このコンマがなければ、ルールの意味は完全に異なります。 「子孫セレクター」を参照してください。 制限なく、必要な数のセレクターをグループ化できます。 たとえば、多くの要素をグレー表示したい場合は、次のようなルールを使用できます。 ヒント: グループ化により、作成者は特定の種類のスタイルをまとめて「圧縮」することができ、より簡潔なスタイル シートを作成できます。 次の 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 {背景: 赤;}ただし、上記のアプローチはあまり効率的ではありません。これは、特に複数のスタイルを持つ要素に対してこのようなリストを作成する必要がある場合に面倒になる可能性があります。代わりに、宣言をグループ化することができます。 これは、前の 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>セレクタと宣言をグループ化して組み合わせる セレクターのグループ化と宣言のグループ化を 1 つのルールに組み合わせて、非常に少ないステートメントで比較的複雑なスタイルを定義できます。 次のルールは、すべての見出しに複雑なスタイルを指定します。
h1、h2、h3、h4、h5、h6 {
色:グレー;
背景: 白;
パディング: 10px;
境界線: 1px 黒一色;
フォントファミリー: Verdana;
}上記のルールは、すべての見出しのスタイルを、白の背景、10 ピクセルのパディング、1 ピクセルの実線境界線の灰色のテキスト、およびテキスト フォント Verdana として定義します。 セレクタと宣言をグループ化して組み合わせる セレクターのグループ化と宣言のグループ化を 1 つのルールに組み合わせて、非常に少ないステートメントで比較的複雑なスタイルを定義できます。 次のルールは、すべての見出しに複雑なスタイルを指定します。
h1、h2、h3、h4、h5、h6 {
色:グレー;
背景: 白;
パディング: 10px;
境界線: 1px 黒一色;
フォントファミリー: Verdana;
}要約する 上記は私が紹介した CSS セレクターのグループ化です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: JavaScript ES6 モジュールの詳細な説明
>>: ウェブデザインにおけるテキスト入力ボックスのパラメータの説明
推薦する
CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード
CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...
MySQLのexecute、executeUpdate、executeQueryの違い
execute、executeUpdate、executeQuery の違い (およびそれらの戻り値...
MySQL 基本チュートリアル: DML ステートメントの詳細な説明
目次DMLステートメント1. レコードを挿入する2. 記録を更新する3. シンプルなクエリレコード4...
nginx を使用した負荷分散モジュールの解釈
目次負荷分散に nginx を使用するための 2 つのモジュール:アップストリームはロードノードプー...
MySQLの半同期の詳細な説明
目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...
Linux環境変数ファイルの簡単な紹介
Linux システムでは、環境変数は適用範囲に応じて、システムレベルの環境変数とユーザーレベルの環境...
JavaScript は大容量ファイルのアップロード処理を実装します
数十 MB 程度の小さいものから 1G 以上の大きいものまで、ビデオ ファイルなどのファイルのアップ...
HTML チュートリアル: よく使われる HTML タグのコレクション (5)
関連記事:初心者が学ぶ HTML タグ (4)導入された HTML タグは、必ずしも XHTML 仕...
誤って削除されたデータを復元するための mysqlbinlog コマンドを使用した mysql の実装
実験環境: MYSQL 5.7.22バイナリログを有効にするログ形式 MIXED実験プロセス: 1....
CSS の flex と inline-flex の違いの詳細な説明
inline-flex は inline-block と同じです。内部要素用の display:fl...
MySQL データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明
この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...
JavaScript BOM ロケーション オブジェクト + ナビゲーター オブジェクト + 履歴オブジェクト
目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...
アバターと国旗の統合を実現する1行のCSSコード
今日は建国記念日で、誰もが祖国の誕生日をお祝いしようとしています。毎年この時期になると、WeChat...
Nginx に lua-nginx-module モジュールをインストールする方法
ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...
MySQLがブール型を返すいくつかの状況について簡単に説明します。
mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...