CSS 选择器分组

Pagsasama ng Selector

Kung umaasa na ang h2 at ang mga talata ay magkaroon ng kulay ng abo, ang pinakamadaling paraan ay gamitin ang sumusunod na pahayag:

h2, p {color:gray;}

Ipinapalit sa kanan ng h2 at p selector, at pagkatapos ay gamitin ang kumakatawan ng kumatawan, at maglagay ng kumakatawan, at maglagay ng isang patakaran. Ang estilo sa kanang bahagi (color:gray;) ay naaangkop sa mga elemento na binigay ng mga selector na ito. Sinasabi ng kumakatawan na ang patakaran ay naglalaman ng dalawang magkakaibang selector. Kung walang itong kumakatawan, ang kahulugan ng patakaran ay lubos na magkaiba. Tingnan ang pamanahong selector.

可以將任意多個選擇器分組在一起，對此沒有任何限制。

例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：

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

亲自试一试：

Isipin na ang grupo 3 ay gumamit ng 'pahintulot ng grupo'. Magiging ipinakilala sa inyo sa hinaharap ang 'pahintulot ng grupo'.

Panghahanap na walang tanging halaga

CSS2 ay naglagay ng isang bagong simpleng selector - panghahanap na walang tanging halaga (universal selector), na ipinapakita bilang isang bituin (*). Ang selector na ito ay puwedeng magkakita sa anumang elemento, katulad ng isang walang tanging halaga.

Halimbawa, ang patakaran na ito ay magiging magiging pulang lahat ng elemento sa dokumento:

* {color:red;}

亲自试一试

Ang pahintulot na ito ay katumbas ng pagkilala ng lahat ng elemento sa dokumento sa pamamagitan ng pagkilala ng grupo. Sa pamamagitan ng panghahanap na walang tanging halaga, maaaring isulat ang lahat ng attribute ng kulay ng lahat ng elemento sa dokumento sa pamamagitan ng isang pindutin ng klavye (isang tanging bituin).

Pahintulot ng grupo

Maaari naming ihatid ang selector at ang pahintulot ng grupo.

Kung gusto ninyong ang lahat ng h1 na may kulay na pulang lapag at magpakita ng teksto na asul gamit ang 28 pxb na kulay na Verdana, maaari ninyong isulat ang sumusunod na estilo:

h1 {font: 28px Verdana;}
h1 {color: asul;}
h1 {background: pulang;}

Ngunit ang pagkilos na ito ay hindi magiging mahusay sa paggagamit ng kapasidad. Lalo na kapag gumagawa tayo ng isang listahan ng estilo para sa isang elemento na may maraming estilo, ito ay magiging nakakabahala. Sa halip, maaari naming ihatid ang mga pahintulot ng grupo:

h1 {font: 28px Verdana; color: puti; background: itim;}

Ito ay magiging magkapareho sa epekto ng tatlong linya ng estilo na ito sa itaas.

Isang pangunahing kailangan, ang pagpili ng grupo ng pahintulot, dapat na gamitin ang punto-komado sa katapusan ng bawat pahintulot. Hindi nililigtas ng browser ang mga white space sa estilo na ito. Sa pamamagitan ng pagdugtung-dugtung ng punto-komado, maaaring magamit ang sumusunod na format ng estilo:

h1 {
  font: 28px Verdana;
  color: asul;
  background: pulang;
  }

亲自试一试

Paano, ang pagkakasulat ng ito ay mas madaling basahin na?

Gayunpaman, kung pinagwawalang-pagpapasok ang ikalawang punto-komado, ang user agent ay magpipahiwatig ang estilo na ito tulad ng:

h1 {
  font: 28px Verdana;
  color: asul background: pulang;
  }

亲自试一试

Dahil ang background ay hindi isang lehitimong halaga para sa color, at dahil ang color ay puwedeng magkaroon lamang ng isang pangalang-klaseng halaga, ang user agent ay magiging lubos na magwawalang-pagpapasok sa pahintulot na color na ito (kasama ang background: black). Sa ganito, ang h1 na pamagat ay magpapakita lamang bilang asul, walang pulang lapag, bagaman mas malamang na hindi makakakita ng asul na h1. Sa halip, ang mga pamagat na ito ay magpapakita lamang bilang default na kulay (kalimitan ang asul), at walang kulay ng lapag. Ang pahintulot na font: 28px Verdana ay magiging gumagana nang maayos, dahil ito ay talagang nagsasara sa isang punto-komado.

与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，也更易维护。

提示：在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时，就不必担心忘记再插入一个分号。

结合选择器和声明的分组

我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。

下面的规则为所有标题指定了一种复杂的样式：

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

亲自试一试

上面的这条规则将所有标题的样式定义为带有白色背景的灰色文本，其内边距是 10 像素，并带有 1 像素的实心边框，文本字体是 Verdana。