关于多类选择器：

  <style type="text/css">
    body{font:medium sans-serif; }


    .attention {text-decoration:line-through;}
    h2.attention {color:purple; }
    p.attention {color:olive; }
    /*~~~~~~~~~~~~~~~
      一个类可以根据其出现的地方而单独指定样式！
      关于p.attention，以前我只是这样解释：类为attention的段落，它可以与其它的段落区分；
      现在，我还多了一层理解：类attention出现在段落中；
      前者语意的重心在段落上，让我误以为类只能声明一次样式，然后将这些样式散布到文档元素中；
      后者让我知道了，类不仅仅局限于声明一次样式，还可以灵活地与各种选择器组队，构成新的选择器；
    ~~~~~~~~~~~~~~~~*/

    .warning {font-weight:bold; font-family:'Courier New'; }
    .urgent {font-style:italic; font-family:Cursive; }/*第三个段落对于这两个重复的font-family声明的优先级相同，因此他们俩的先后顺序就格外重要了！*/
    .warning.urgent {background:silver; }/*意为：同时拥有它们俩的元素！但IE6会将其误以为只要有.urgent（以后一个类为尊）出现的元素*/
  </style>

<body>
  <h2 class="attention">Assemble!</h2>
  <p class="warning">warning</p>
  <p class="urgent">urgent</p>
  <p class="warning urgent attention">warning urgent</p>
</body>

关于表格：

  <style type="text/css">
    table {border:1px solid black; }
    td {border:4px solid orange; width:10%; height:20%; }
    /*width:10%相对的是谁？有趣的是，将值增为20%后，竟然格子还更小了，是因为table未设置宽度的原因吗？
      height用相对值无效，因为无法确定父元素的高度；
    */
  </style>
<!--还有一条注意的：
盒模型中的width 指的是内容区的宽度，不包括border,padding,margin的尺寸；
而表格中的table{width: }与col{width: } 指的是内容区+border+padding 之和！但是td{width: }  类似于盒模型指的是内容区宽度！
-->
<body>
<table cellspacing="0"><!--FAIL in IE6 单元格之间的距离为零，表格之间会有两条边框紧邻，双倍；若是用CSS的border-collapse:collapse;能够解决；-->
  <tr>
    <td>qwe</td>
    <td>sl</td>
    <td>io</td>
  </tr>
  <tr>
    <td>lk</td>
    <td>kk</td>
    <td>nv</td>
  </tr>
</table>
</body>