گروه‌بندی انتخاب‌گرها CSS

选择器分组

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。

می‌توان هر تعداد انتخابگر را در یک گروه قرار داد و هیچ محدودیتی در این زمینه وجود ندارد.

برای مثال، اگر بخواهید بسیاری از عناصر را به رنگ خاکستری نمایش دهید، می‌توانید از قوانین مشابه زیر استفاده کنید:

بد، ه2، پ، جدول، th، td، pre، قوی، em {رنگ:سفید;}

توجه:با گروه‌بندی، سازنده می‌تواند نوع خاصی از استایل‌ها را "کمپرس" کند، به این ترتیب می‌توان یک جدول استایل‌های ساده‌تر دریافت کرد.

دو گروه‌بندی زیر می‌توانند نتایج مشابهی را ارائه دهند، اما می‌توان به وضوح دید که کدام یک آسان‌تر نوشته شده است:

/* بدون گروه‌بندی */
ه1 {رنگ:آبی;}
ه2 {رنگ:آبی;}
ه3 {رنگ:آبی;}
ه4 {رنگ:آبی;}
ه5 {رنگ:آبی;}
ه6 {رنگ:آبی;}
/* grouping */
ه1, ه2, ه3, ه4, ه5, ه6 {رنگ:آبی;}

آزمایش کنید

گروه‌ها انتخاب‌های جالبی ارائه می‌دهند. به عنوان مثال، همه‌ی گروه‌های قوانین در این مثال معادل هستند، هر گروه فقط روش‌های مختلف نمایش انتخابگر و گروه‌بندی‌های بیان شده را نشان می‌دهد:

/* گروپ 1 */
ه1 {رنگ:نقره‌ای; پس‌زمینه:سفید;}
ه2 {رنگ:نقره‌ای; پس‌زمینه:سفید;}
ه3 {رنگ:سفید; پس‌زمینه:سفید;}
ه4 {رنگ:نقره‌ای; پس‌زمینه:سفید;}
ب {رنگ:سفید; پس‌زمینه:سفید;}
/* گروپ 2 */
ه1, ه2, ه4 {رنگ:نقره‌ای;}
ه2, ه3 {پس‌زمینه:سفید;}
ه1, ه4, ب {پس‌زمینه:سفید;}
ه3 {رنگ:سفید;}
ب {رنگ:سفید;}
/* گروپ 3 */
ه1, ه4 {رنگ:نقره‌ای; پس‌زمینه:سفید;}
ه2 {رنگ:نقره‌ای;}
ه3 {رنگ:سفید;}
ه2, ه3 {پس‌زمینه:سفید;}
ب {رنگ:سفید; پس‌زمینه:سفید;}

آپ خود بخود امتحان کنید:

请注意，group 3 中使用了“声明分组”。稍后我们会为您介绍“声明分组”。

通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

例如，下面的规则可以使文档中的每个元素都为红色：

* {color:red;}

آزمایش کنید

这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。

声明分组

我们既可以对选择器进行分组，也可以对声明分组。

假设您希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式：

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，我们可以将声明分组在一起：

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

这与前面的 3 行样式表的效果完全相同。

注意，对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。只要加了分号，就可以毫无顾忌地采用以下格式建立样式：

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

آزمایش کنید

怎么样，上面这种写法的可读性是不是更强。

不过，如果忽略了第二个分号，用户代理就会把这个样式表解释如下：

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

آزمایش کنید

因为 background 对 color 来说不是一个合法值，而且由于只能为 color 指定一个关键字，所以用户代理会完全忽略这个 color 声明（包括 background: black 部分）。这样 h1 标题只会显示为蓝色，而没有红色背景，不过更有可能根本得不到蓝色的 h1。相反，这些标题只会显示为默认颜色（通常是黑色），而且根本没有背景色。font: 28px Verdana 声明仍能正常发挥作用，因为它确实正确地以一个分号结尾。

مانند گروه‌بندی انتخاب‌گرها، گروه‌بندی بیان نیز یک روش راحت است که می‌تواند سبک‌نامه‌ها را کوتاه‌تر و شفاف‌تر کند و همچنین قابل نگهداری‌تر باشد.

توجه:اضافه کردن یک نقطه و逗ه در آخرین بیان در یک قوانین یک عادت خوب است. هنگام اضافه کردن یک بیان دیگر به قوانین، نیازی به نگرانی از فراموش کردن یک نقطه و逗ه نیست.

گروه‌بندی انتخاب‌گرها و بیان

ما می‌توانیم با ترکیب گروه‌بندی انتخاب‌گرها و گروه‌بندی‌های بیان، در یک قوانین گروه‌بندی‌های بیان و انتخاب‌گرها را به طور مؤثر تعریف کنیم.

این قوانین برای همه عنوان‌ها یک استایل پیچیده‌ای تعریف می‌کند:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

آزمایش کنید

این قوانین تمام استایل‌های عنوان‌ها را به متن خاکستری با پس‌زمینه سفید تعریف می‌کند، که دارای 10 پیکسل مجازات داخلی و یک کناره 1 پیکسلی جامد سیاه است و فونت آن Verdana است.