CSS チュートリアル: CSS セレクターのグループ化の詳細な分析
この記事では主に CSS セレクターのグループ化に関する情報を紹介しますので、必要な方は参考にしてください
セレクターのグループ化
h2 要素と段落をグレーにしたいとします。これを実現する最も簡単な方法は、次の宣言を使用することです:
h2, p {color:gray;}h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。
可以将任意多个选择器分组在一起，对此没有任何限制。
例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：
/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：
/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：
* {color:red;}
<html>
<head>
<style type="text/css">
* {color:red;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
</html>这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。
声明分组
我们既可以对选择器进行分组，也可以对声明分组。
假设您希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式：
h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，我们可以将声明分组在一起：
h1 {font: 28px Verdana; color: white; background: black;}
body, h2, p, table, th, td, pre, Strong, em {color: grey;}< /code><p></p>ヒント: グループ化することで、作成者は特定のタイプのスタイルを「圧縮」して、より簡潔なスタイル シートを作成できます。 <p></p>次の 2 つのルール セットは同じ結果を達成しますが、どちらの方が書きやすいかは明らかです。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>h1 {
font: 28px Verdana;
color: blue;
background: red;
}</pre><div class="contentsignin">ログイン後にコピー</div></div></p> グループ化により、いくつかの興味深いオプションが提供されます。たとえば、次の例のすべてのルール グループ化は同等であり、各グループはセレクターと宣言をグループ化する異なる方法を示しているだけです: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>h1 {
font: 28px Verdana;
color: blue background: red;
}</pre><div class="contentsignin">ログイン後にコピー</div></div></p><p>ワイルドカード セレクター<strong></strong></p>CSS2 では、新しい単純な選択 - ユニバーサル セレクターが導入され、アスタリスクで表示されます。 (*)。このセレクターは、ワイルドカードと同様に、任意の要素に一致します。 <p></p>たとえば、次のルールはドキュメント内のすべての要素を赤にすることができます: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
<html>
<head>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html></pre><div class="contentsignin">ログイン後にコピー</div></div></p>この宣言は、ドキュメント内のすべての要素をリストするグループ化セレクターと同等です。ワイルドカード セレクターを使用すると、単一のキーストローク (アスタリスクのみ) で、ドキュメント内のすべての要素の色属性値を赤にすることができます。 <p><strong></strong>宣言のグループ化</p><p></p>セレクターと宣言の両方をグループ化できます。 <p></p>すべての h1 要素の背景を赤にし、高さ 28 ピクセルの Verdana フォントを使用して青のテキストとして表示したいとします。次のスタイルを書くことができます: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div></p>しかし、上記のアプローチはあまり効率的ではありません。これは、複数のスタイルを持つ要素に対してそのようなリストを作成する場合に特に問題になります。代わりに、宣言をグループ化することができます: <p><strong><code>h1 {font: 28px Verdana; color: black; background: black;} これは、前の 3 行のスタイルシートとまったく同じ効果があります。 ステートメントをグループ化するときは、各ステートメントの最後にセミコロンを使用することが重要であることに注意してください。ブラウザはスタイル シートの空白を無視します。セミコロンさえ付ければ以下のような形式でも問題なく作成できます: h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}ただし、2 番目のセミコロンが省略された場合、ユーザー エージェントはスタイル シートを次のように解釈します: rrreee
背景は色の有効な値ではなく、色には 1 つのキーワードしか指定できないため、ユーザー エージェントは次のように解釈します。この色の宣言（背景：黒い部分も含む）は完全に無視してください。この方法では、h1 見出しは赤色の背景なしで青色のみで表示されますが、青色の h1 がまったく表示されない可能性が高くなります。代わりに、これらのヘッダーは単にデフォルトの色 (通常は黒) で表示され、背景色はまったくありません。 font: 28px Verdana 宣言は正しくセミコロンで終わるため、引き続き機能します。 🎜🎜セレクターのグループ化と同様、宣言のグループ化はスタイルシートを短縮する便利な方法であり、スタイルシートをより明確かつ保守しやすくします。 🎜🎜ヒント: ルールの最後のステートメントの後にセミコロンを追加することをお勧めします。ルールに別の宣言を追加するときに、別のセミコロンを挿入し忘れることを心配する必要はありません。 🎜🎜🎜セレクターと宣言のグループ化を組み合わせる🎜🎜🎜セレクターのグループ化と宣言のグループ化を 1 つのルールに組み合わせることができ、非常に少ないステートメントで比較的複雑なスタイルを定義できます。 🎜🎜次のルールは、すべての見出しに複雑なスタイルを指定します: 🎜rrreee🎜🎜セレクターと宣言のグループ化を組み合わせる🎜🎜🎜 セレクターのグループ化と宣言のグループ化を 1 つのルールで組み合わせることができ、非常に少ないステートメントを使用して比較的複雑なスタイルを定義できます。 🎜🎜次のルールは、すべての見出しの複雑なスタイルを指定します: 🎜rrreee🎜上記のルールは、すべての見出しのスタイルを、背景が白、パディングが 10 ピクセル、ピクセルが 1/2 の実線の灰色のテキストとして定義します。テキストのフォントは Verdana です。 🎜🎜🎜セレクターと宣言のグループ化を組み合わせる🎜🎜🎜セレクターのグループ化と宣言のグループ化を 1 つのルールに組み合わせることができ、非常に少ないステートメントで比較的複雑なスタイルを定義できます。 🎜🎜次のルールは、すべての見出しに複雑なスタイルを指定します: 🎜rrreee🎜🎜🎜🎜以上がCSS チュートリアル: CSS セレクターのグループ化の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7672
15
1393
52
1206
24
91
11
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
