[翻译]标记语言和样式手册 Chapter 9 精简标签（2）

方法B:自然的选择

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

方法B短小精悍!但是等等,分类都到哪里去了?恩...你很快就会发现我们其实并不是真的需要它们,主要是因为我们把这些标签都塞进一个具有惟一名称(本例是sidebar)的<div>的关系.

这就是发挥继承选择器作用的地方了.我们只需要直接以标签名称指定位于sidebar之内的标签,就能去掉这些多余的分类属性.

以内容前后关系指定CSS

让我们看看与方法A相同的样式,但是这次我们用继承选择器指定位于sidebar里的标签.

#sidebar h3 {
  font-family: Georgia, serif;
  color: #c63;
  border-bottom: 1px solid #ccc;
  }
#sidebar ul {
  list-style-type: none;
  }
#sidebar li {
  font-weight: bold;
  }

通过参考 #sidebar ID,就能为包含在其中的标签指定特殊样式,举例来说,只有位于<div id="sidebar">之内的<h3>标签会设定上述的CSS规则.

这种根据内容前后关系指定样式的做法是缩短标记内容的关键.通常在为内容设计好语义结构之后,就不必为标签加上分类属性了.

不止用在侧边栏

我们只展示了页面的一个段落(就是侧边栏),不过这个做法可以应用到整个页面结构上,只要将标记内容依照逻辑分成几个段落(或许是#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字体的话,就得修改三个地方,没办法一次搞定.