层叠样式

我们把 HTML 的样式化系统称为 CSS，即层叠样式表（Cascading Style Sheets）。样式表是一系列规则，指出如何为文档中元素添加样式。可以在<style>标签中写入 CSS。

  1. <style>
  2.   strong {
  3.     font-style: italic;
  4.     color: gray;
  5.   }
  6. </style>
  7. <p>Now <strong>strong text</strong> is italic and gray.</p>

所谓层叠指的是将多条规则组合起来产生元素的最终样式。在示例中，<strong>标签的默认样式font-weight:bold，会被<style>标签中的规则覆盖，并为<strong>标签样式添加font-style和color属性。

当多条规则重复定义同一属性时，最近的规则会拥有最高的优先级。因此如果<style>标签中的规则包含font-weight:normal，违背了默认的font-weight规则，那么文本将会显示为普通样式，而非粗体。属性style中的样式会直接作用于节点，而且往往拥有最高优先级。

我们可以在 CSS 规则中使用标签名来定位标签。规则.abc指的是所有class属性中包含abc的元素。规则#xyz作用于id属性为xyz（应当在文档中唯一存在）的元素。

  1. .subtle {
  2.   color: gray;
  3.   font-size: 80%;
  4. }
  5. #header {
  6.   background: blue;
  7.   color: white;
  8. }
  9. /* p elements with id main and with classes a and b */
  10. p#main.a.b {
  11.   margin-bottom: 20px;
  12. }

优先级规则偏向于最近定义的规则，仅在规则特殊性相同时适用。规则的特殊性用于衡量该规则描述匹配元素时的准确性。特殊性取决于规则中的元素数量和类型（tag、class或id）。例如，目标规则p.a比目标规则p或.a更具体，因此有更高优先级。

p>a这种写法将样式作用于<p>标签的直系子节点。类似的，p a应用于所有的<p>标签中的<a>标签，无论是否是直系子节点。