这篇文章和演示由 Ivan Enderlin 提供，他是 HOA 框架 的作者，同时也是一名资深 Web 开发者。

这篇文章将配合下面的演示展示在 Firefox 3.5 中实现的 CSS3 选择器，它可以轻松地创建出样式精美的表格。

查看演示 | 使用 CSS3 选择器快速创建漂亮表格

基本 HTML 表格

首先，我们从编写一个简单的 HTML 表格开始。注意：我们没有使用任何 class 或 id 属性，这正是这项技术如此出色的原因。

    ...
    
      ...
      
    ...
    
      ...
      

  

    
...
...
  
  

    

      
...
...
    

      
...
...
    

  

现在，让我们编写一些 CSS 代码，让这个简单的表格看起来更加美观。

table {
    font: 90%/1.5em "Lucida Grande", Geneva,
                    "DejaVu Sans", "Bitstream Vera Sans", AnjaliOldLipi,
                    "Lucida sans", "Trebuchet MS", Arial, Verdana;
    text-align: center;
    border: 4px black double;
    border-spacing: 0;
    -moz-border-radius: 12px;
    -moz-box-shadow: #6a3d37 5px 5px 6px;
    -webkit-border-radius: 12px;
    -webkit-box-shadow: #6a3d37 5px 5px 6px;
    border-radius: 12px;
    box-shadow: #6a3d37 5px 5px 6px;
    background: #b59d5c
}

使用 border-spacing、border-radius 和 box-shadow 属性可以快速轻松地为表格注入一些美感。

第一个选择器

现在，我们想为所有的 th 标签设置样式。使用 CSS 选择器，这很简单。

th {
    color: #fff;
    font-size: 110%;
    text-shadow: #6a3d37 2px 2px 2px
}

提醒一下：如果我们写 table th，我们的意图是选择表格元素的所有子元素 th 元素；如果我们写 thead > th，我们的意图是选择 thead 元素的所有直接子元素 th 元素。这只是一个提醒 :-)

更细致的选择器

th 标签代表表格头部。我们想选择第一个表格头部。嗯……也许我们应该使用 first-of-type 伪类。它代表一个元素，该元素在其父元素的所有子元素列表中是同类型元素的第一个子元素。所以现在我们有

th:first-of-type {
font-weight: bold;
font-style: italic
}

奇偶行

表格中经常遇到的一个问题是：如何选择奇偶行？解决方案是 nth-child() 伪类。所有这些伪类都支持 an+b 语法 - 要选择所有偶数元素，我们使用 2n；要选择所有奇数元素，我们使用 2n+1 元素；要选择所有第三个元素，我们使用 3n。换句话说，这将匹配元素的 bth 子元素，前提是所有子元素都已经被分成每组 a 个元素。

所以，让我们设置奇偶行的样式

tr:nth-child(odd) {
    color: #e0d8cb;
    background: #474644
}

tr:nth-child(even) {
    color: #6a3d37
}

首列和末列的内边距

现在，我们想要在首列和末列添加内边距。我再次提醒您，我们没有任何类或 ID，而且列数是未知的。

解决方案是 first-of-type 和 last-of-type 伪类。我们使用以下代码选择所有首列和末列的 th 和 td 元素

th:first-of-type,
td:first-of-type {
    padding: 0 0 0 4em
}

th:last-of-type,
td:last-of-type {
    padding: 0 4em 0 0
}

最后两行

现在，我们想要组合多个伪类（并引入一个新的伪类）。

假设我们想要选择第 1 行、第 4 行和第 7 行。这个数学表达式不像我们期望的那样简单。技巧是将我们的行分成每组 3 行，像这样：3n。但是，这将选择第 3 行、第 6 行和第 9 行。几乎快成功了！在这些组中，我们将选择第一个元素，所以 3n+1（或者 3n-2 如果您喜欢把事情复杂化）。

这很好，但这将在我们最后两行不透明的行中选择一行。理想情况下，我们应该说：“选择每组三行的第一行，但不要选择最后一行（因为最后一行会被选中，因为最后一行是第 7 行）。”很简单。我们将使用 not 伪类，并将其与 last-child 伪类（或 last-of-type，它在这里也能正常工作）结合使用。

因此

tr:nth-last-child(-n+2) {
    opacity: .75
}

tr:nth-child(3n+1):not(:last-child) td {
    text-shadow: red 0 0 8px
}

最终的源代码是

table {
    display: table;
    font: 90%/1.5em "Lucida Grande", Geneva,
                    "DejaVu Sans", "Bitstream Vera Sans", AnjaliOldLipi,
                    "Lucida sans", "Trebuchet MS", Arial, Verdana;
    text-align: center;
    border: 4px black double;
    border-spacing: 0;
    -moz-border-radius: 12px;
    -moz-box-shadow: #6a3d37 5px 5px 6px;
    -webkit-border-radius: 12px;
    -webkit-box-shadow: #6a3d37 5px 5px 6px;
    border-radius: 12px;
    box-shadow: #6a3d37 5px 5px 6px;
    background: #b59d5c
}

th {
    color: #fff;
    font-size: 110%;
    text-shadow: #6a3d37 2px 2px 2px
}

    th:first-of-type {
        font-weight: bold;
        font-style: italic
    }

tr:nth-child(odd) {
    color: #e0d8cb;
    background: #474644
}

tr:nth-child(even) {
    color: #6a3d37
}

th:first-of-type,
td:first-of-type {
    padding: 0 0 0 4em
}

th:last-of-type,
td:last-of-type {
    padding: 0 4em 0 0
}

tr:nth-last-child(-n+2) {
    opacity: .75
}

tr:nth-child(3n+1):not(:last-child) td {
    text-shadow: red 0 0 8px
}

一步步查看演示.