现在,我们能分组选择符,也可以分组声明。将二者结合起来,就可以用一条语句来定义复杂的样式。假设我们需要为文档中的一些标题分配一些复杂的样式。如下:
H1,H2,H3,H4,H5,H6{color:gray;
background:white;
padding:0.5em;
font:20pt Charcoal,sans-serif;
border:1px solid black;
text-transform:capitalize;
}
分组选择符意味着右边的所有样式都应用于列出的标签元素,而分组声明表示所有列举的样式都被运用于左边的选择符。其结果如图所示:
这种方法显然更可取,要不然像下面这样逐一定义就会比较繁琐,而且下面的还没有完全写出来:
H1 {color:gray;}
H2 {color:gray;}
H3 {color:gray;}
H4 {color:gray;}
H5 {color:gray;}
H6 {color:gray;}
H1 {background:white;}
H2 {background:white;}
H3 {background:white;}
当然,如果愿意的话,可以像这样来书写——但不推荐这样做。否则,当需要修改样式的时候,面临的问题将和满篇使用Font标签一样多!幸亏有了分组才使CSS文件能像今天这样,下面是一个典型的样式表:
BODY {background:white;color:gray;}
H1,H2,H3,H4,H5,H6 {font-family:Helvetica,sans-serif;color:white;background:black;}
H1,H2,H3 {border: 2px solid gray;font-weight:bold;}
H4,H5,H6 {border: 1px solid gray;}
P,TABLE {color:gray;font-family:Times,serif;}
PRE {margin:1em;color:maroon;}
尽管我们已经介绍了它强大的功能和复杂性,但对于选择符来说,还有值得研究的地方。可以在选择符中加入更多表达式,这样就可以根据信息类型对不同的元素应用不同的样式。当然要得到这样强大的功能,必须下更大的功夫,但这是值得的。