CSS チュートリアル: CSS セレクターのグループ化の詳細な分析-CSSチュートリアル-php.cn

この記事では主に 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;}

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

セレクターは好きなだけグループ化できます。これには制限はありません。

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

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:css;">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:css;">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:css;">h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }
&lt;html&gt;
&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;This is heading 1&lt;/h1&gt;
&lt;h2&gt;This is heading 2&lt;/h2&gt;
&lt;h3&gt;This is heading 3&lt;/h3&gt;
&lt;h4&gt;This is heading 4&lt;/h4&gt;
&lt;h5&gt;This is heading 5&lt;/h5&gt;
&lt;h6&gt;This is heading 6&lt;/h6&gt;
&lt;/body&gt;
&lt;/html&gt;</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:css;">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 サイトの他の関連記事を参照してください。