CSS ရွေးချယ်သူ အုပ်စု

选择器分组

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

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;}

ကိုယ်ိုက်ကြည့်ချင်း

请注意，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;}

အဆိုပါ အချက်အလက် အစု က အဆိုပါ အချက်အလက် အစု က ကိုယ်ကျင်းပြီး ဖြစ်သည်။

ကိုယ်ကျင်းပြီး အချက်အလက် အဖွဲ့အစည်း အတွက် အချက်အလက် အဖွဲ့အစည်း ကို အပြီးအပိုင်း တွင် နှစ်ခု အသုံးပြု ပြီး ဖြစ်သည်။ အရာဝတ္တုကြီး ကို အသုံးပြုခြင်း အတွက် အရာဝတ္တုကြီး ကို လွဲချောက်ခဲ့လျှင် အရာဝတ္တုကြီး ကို အသုံးပြု ပြီး ဖြစ်သည်။

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

亲自试一试

ဒါကို မြင်ပါ၊ အဆိုပါ အစကား အစု အသုံးပြုခြင်း က ကိုယ်ကျင်းပြီး ဖြစ်လာပါတယ်။

သို့သော် ဒုတိယ အန်ဖား ကို လွဲချောက်ခဲ့လျှင် အသုံးပြုသူလူကြီး မှာ အဆိုပါ စကားလုံး အစုအဖြစ် ထုတ်ပြန်မည်။

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

亲自试一试

သို့သော် background ဟာ color အတွက် ပြည့်စုံသော အမှတ် မဟုတ်၊ ပြီးတော့ color အတွက် သာ အကြောင်းအရာ တစ်ခု သာ ချမှတ် ဖို့ ရှိသောကြောင်းမှာ အသုံးပြုသူလူကြီး မှာ အမှတ်အသား color အချက်အလက် (background: black ပုံ) ကို အပြင်သတ် လိမ့်မည် (အပြင် background: black ပုံ)။ ထို့ကြောင်းမှာ 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。