不止用在侧边栏

我们只展示了页面的一个段落(就是侧边栏),不过这个做法可以应用到整个页面结构上,只要将标记内容依照逻辑分成几个段落(或许是#nav,#content,#sidebar,#footer),然后以继承选择器为这个段落内的标签分别制定特殊样式就可以了.

举例来说,假设在页面内的#content与#sidebar段落内都用了<h3>标签,并且希望它们都使用serif字体,然而,你希望其中一个段落的<h3>以紫色显示,另一个则是橘色.

这是不需要修改任何标签,加上分类属性.我们可以通过一个全局样式指定所有<h3>标签共用的规则,然后用继承选择器根据标签的位置设定颜色.

h3 {
  font-family: Georgia, serif; /* All h3s to be serif */
  }
#content h3 {
  color: purple;
  }
#sidebar h3 {
  color: orange;
  }

指定所有<h3>标签都使用senif字体,而颜色必须根据内容上下文关系选择使用紫色或是橘色,此时我们不需要重复共享规则(这个例子中是font-family),因此能缩短CSS的内容,同时防止多个声明内出现重复的规则.

我们不仅能减少class属性需要的额外的标记空间,同时CSS结构也变得更具意义,让我们更容易阅读它的内容,更容易依照页面分段进行组织,修改特定的规则也变得很简单,对庞大,复杂的排版来说特别明显,因为这时你可能会同时拥有上百条CSS规则.

举例来说,在这个例子中,如果把共享规则加到每个声明中,而稍后想把所有<h3>换成sans serif字体的话,就得修改三个地方,没办法一次搞定.

越少分类越好维护

除了减少需要使用的源代码空间之外,用继承选择器代替多余分类还代表了标记内容未来易于扩展.

举例来说,让我们假设你想让sidebar之内的链接变成红色,而不是像页面的其余部分那样使用蓝色,因此你建立了一个red类,像这样加到锚点标签中:

<div id="sidebar">
  <h3>About This Site</h3>
  <p>This is my site.</p>
  <h3>My Links</h3>
  <ul>
    <li><a href="archives.html" class="red">Archives</a></li>
    <li><a href="about.html" class="red">About Me</a></li>
  </ul>
</div>

而把这些链接变成红色(假设预设的链接颜色不是红色)则需要类似这样的CSS:

a:link.red {
  color: red;
  }

这些动作没什么问题,也完全可以正常运作,但是如果未来你改变心意,想把这些链接换成绿色的话怎么办?或者更实际一点,你的老板偶尔说了"今年红色已经过时了,把这些侧边栏链接换成绿色"!没问题,你只要修改CSS里的red类就搞定了,但是标记内容里的class属性还是red,明显这不完全符合语义,就跟使用其他颜色当作分类名称一样.

这不是个使用显示效果当作分类名称的好地方,但是完全不指定分类的话,我们能省去许多处理分类的精力(以及代码),同时让内容语义更合理,我们倒不如以继承选择器选择这些侧边栏的链接,依照需要指定样式.

标记内容和方法B完全相同,而设定侧边栏的链接所需的CSS将是这样:

#sidebar li a:link {
  color: red;
  }

基本上,这代表"只有在<div id="sidebar">之内的<li>标签里的使用了href属性的锚点标签应还显示成红色".

现在,我们维持了简短灵活的标记内容,而未来更新只需要用到CSS,不管想让链接变成红色,绿色,粗体,斜体都没问题.

接着,来看看另一个精简标签的做法:消除不必要的<div>标签,直接取用现有的块级标签.