使用 CSS3 中的僞類渲染表格

　　CSS 中的僞類（pesudo class）是一種經過文檔外信息或經過常規元素選擇器沒法表達的信息查找頁面元素的方法。您可能已經使用過僞類，好比使用：hover 來改變鼠標懸停在超連接上時連接的顏色。使用 CSS3 中新的僞類能夠更輕鬆地定位頁面元素。

概述

在 Web 開發過程當中，開發人員常常會經過使用 CSS 來實現頁面所需的樣式效果。例如：利用服務器端代碼或 JavaScript 腳本生成條紋樣式的表格，或爲了要爲多個頁面元素中的一部分添加樣式，不得不使用大量帶有額外 class 屬性的標籤。

這些狀況在 CSS3 出現後變得很是簡單！CSS3 定義了一系列很是神奇的頁面元素選擇器，經過它們，這個過程將變得簡單而迅速。元素選擇器是一種模式，它用於輔助查找 HTML 文檔中的某些頁面元素，以便找出後爲其添加特定的樣式。咱們將經過利用這些新的頁面元素選擇器渲染表格爲例，介紹它們的功能。

CSS 中的僞類（pesudo class）是一種經過文檔外信息或經過常規元素選擇器沒法表達的信息查找頁面元素的方法。您可能已經使用過僞類，好比使用:hover 來改變鼠標懸停在超連接上時連接的顏色。使用 CSS3 中新的僞類能夠更輕鬆地定位頁面元素。

 

優化購物車清單樣式

咱們採用購物車清單爲例介紹如何經過頁面元素選擇器來優化其樣式。咱們首先製做一個標準的 HTML 表格如圖 1

圖 1. 當前購物車使用未加入樣式的 HTML 表格

這是一張標準的購物車清單，上面包含了本次訂單涉及的商品名稱、價格、數量、合計、總價、運輸費用以及總額。清單 1 是該表格的代碼。

清單 1. 未加入樣式的 HTML

<table border="1">
<tr>
<th>商品</th>
<th>價格</th>
<th>數量</th>
<th>合計</th>
</tr>
<tr>
<td>可樂</td>
<td>￥3.00</td>
<td>10</td>
<td>￥30.00</td>
</tr>
<tr>
<td>咖啡豆</td>
<td>￥110.00</td>
<td>6</td>
<td>￥660.00</td>
<tr>
<td>雨傘</td>
<td>￥10.00</td>
<td>5</td>
<td>￥50.00</td>
</tr>
<tr>
<td colspan="3">總價</td>
<td>￥740.00</td>
</tr>
<tr>
<td colspan="3">運費</td>
<td>￥8.00</td>
</tr>
<tr>
<td colspan="3">總額</td>
<td>￥748.00</td>
</tr>
</table>

首先，讓我去掉難看的默認表格邊框，如清單 2：

清單 2. 表格邊框樣式

table {
width: 600px;
border-collapse: collapse;
}

th, td {
border: none;
}

而後，爲表頭略加修飾，用黑色做爲背景色，並使用白色的字體，如清單 3：

清單 3. 表頭背景色及字體樣式

th {
background-color: #000000;
color: #ffffff;
}

應用以上樣式後，購物車清單如圖 2 所示：

圖 2. 添加基本樣式後的 HTML 表格

以上咱們只是簡單地處理了表格的邊框以及調整了間距和表頭，接下來咱們要開始運用僞類來渲染行和列。

 

使用 nth-of-type 條紋化表格的行

若是對相鄰的兩行使用不一樣的背景顏色顯示，則會增長可讀性，這就是咱們常見的「斑馬紋」樣式的表格。斑馬紋很重要，由於它爲用戶提供了可參照的水平線。這種效果最好在表現層經過 CSS 來實現。傳統的作法是爲表格的行添加額外的「odd」（奇）和「even」（偶）類名，並分別爲「odd」和「even」類定義樣式。HTML 5 標準建議開發人員避免使用那些用於定義外觀的類名。若是咱們不想在表格中引入額外的樣式類，那就要藉助於新的元素選擇器，即可以輕易地實現上述功能而沒必要改變標記結構，進而完全實現表現層與內容的分離。

nth-of-type 選擇器能夠查找某個特定類型中的第 n 個頁面元素，這能夠經過使用公式或關鍵字來實現。咱們首先介紹關鍵字查找，由於它更容易理解，以後再詳細介紹如何使用公式查找頁面元素。

咱們的目的是條紋化表格中的行，使相鄰的兩行顏色不一樣，那麼最簡單的方法就是找到全部偶數行，而後賦予其同一種背景顏色。一樣，咱們也能夠對奇數行賦予同一種顏色。CSS3 提供了 even 和 odd 兩個關鍵字來支持這一特定的場景。實現方式請參照清單 4

清單 4. 奇偶行背景樣式

tr:nth-of-type(even){
background-color: #F3F3F3;
}

tr:nth-of-type(odd){
background-color: #DDDDDD;
}

清單 4 中的選擇器實現了找到全部的偶數行，改變其背景色，而後找到全部奇數行，把它們的背景色改爲另外一種顏色。如此就實現了斑馬條紋，而不須要額外的腳本代碼，也沒必要在每行上加入額外的類名。

在應用上面的樣式以後，表格如圖 3 所示：

圖 3. 添加斑馬紋以後的表格

接下來，咱們來改變表格列的對齊方式

 

使用 nth-child 對齊列文本

在默認狀況下，表格中全部列的文本都是左對齊。下面，咱們要讓購物車清單中除第一列之外的全部列文本都右對齊。這樣價格列和數量列由於右對齊會更加清晰，可讀性加強。咱們來看看如何使用 nth-child 來實現這一效果。

與 nth-of-type 相似，nth-child 選擇器也是用於查找頁面某元素的子元素，咱們一樣可使用關鍵字或公式。

這裏的公式就是 an+b，a 是倍數，b 是偏移量。爲了方便理解，咱們仍然用購物車清單爲例。

若是咱們想選擇全部行，能夠按照清單 5 這樣使用選擇器：

清單 5. 選擇表格全部行

table tr:nth-child(n)

清單 5 中咱們沒有使用任何倍數，也沒有使用任何偏移量。若是咱們想選擇除了第一行表頭以外的全部行，就可使用偏移量來實現，如清單 6：

清單 6. 選擇表頭以外全部行

table tr:nth-child(n+2)

若是咱們想跳躍選擇一些行，就可使用倍數，如每兩行選擇一行用 2n：

清單 7. 每兩行選擇一行

table tr:nth-child(2n)

如每三行選擇一行則要使用 3n。

咱們能夠同時使用偏移量來改變起始行。如清單 8 將從表格的第四行開始每隔一行選擇一行：

清單 8. 從第四行開始每隔一行選擇一行

table tr:nth-child(2n+4)

這樣一來，咱們就能夠改變購物車清單除第一列以外的其餘列的文本對齊方式了：

清單 9. 第一列以外的其餘列右對齊

td:nth-child(n+2){
text-align: right;
}

如此，咱們的購物車清單獲得了真正的改善，如圖 4 所示：

圖 4. 改變列對齊方式後的表格

咱們接下來再對錶格的最後一行進行修飾。

 

使用 last-child 加粗最後一行

Web 開發人員一般會爲段落設置底邊距以使頁面開起來錯落有致。不過，這種作法會致使一組元素的最後出現多餘的底邊距。例如，若是段落位於側邊欄或標註欄中，去掉最後一個段落的底邊距可以減小最後一段與容器邊緣之間的空間浪費。在這種狀況下，last-child 是最佳選擇，它的做用是獲取一組元素中的最後一個子元素。咱們能夠利用它來去除最後一段的底邊距：

清單 10. 去除最後一個段落的底邊距

p{ margin-bottom: 20px; }
#sidebar p:last-child{ margin-bottom: 0; }

回到咱們的購物車清單，如今的購物車清單看起來已經很漂亮了，可是咱們還能夠對最後一行加粗顯示使其更加突出。一樣可使用 last-child 來實現。

清單 11. 加粗表格最後一行

tr:last-child{
font-weight: bolder;
}

再加粗表格的最後一列以突出合計列：

清單 12. 加粗表格最後一列

td:last-child{
font-weight: bolder;
}

最後，咱們還要把彙總價格的字體放大一些，藉助 last-child 選擇器，咱們能夠找到表格的最後一個單元格，爲其添加下面的樣式：

清單 13. 放大最後一個單元格的字體

tr:last-child td:last-child{
font-size: 24px;
}

此時咱們獲得個購物車清單如圖 5 所示：

圖 5. 字體加粗放大後的表格

 

使用 nth-last-child 向前查找元素

若是咱們但願把運費從商品價格中區分出來，可使用 nth-last-child 選擇器快速定位此行。在前文中咱們介紹瞭如何使用 nth-child 和 an+b 公式來查找指定的子元素。nth-last-child 選擇器的用法和 nth-child 選擇器的用法幾乎徹底同樣，惟一不一樣之處在於 nth-last-child 是從最後一個元素開始反方向往前查找。正由於如此，用它來查找集合中倒數第二個元素就很是簡單。

爲了找到運費行，咱們可使用清單 14 中的代碼：

清單 14. 高亮運費行

tr:nth-last-child(2){
color: blue;
}

咱們還須要對購物車清單作最後一次改進。以前，咱們將除第一列以外的全部列都改成了右對齊。儘管修改後商品列和價格列看起來還不錯，可是表格的最後三行看起來仍是有點不太協調。咱們能夠把表格的最後行文本設爲右對齊。藉助 nth-last-child 選擇器的公式，咱們能夠實現這個效果。

清單 15. 最後三行文本右對齊

tr:nth-last-child(-n+3){
text-align: right;
}

咱們能夠把它理解爲一個範圍選擇器。咱們使用 nth-last-child，使它偏移 3，意味着選擇偏移元素以前的全部元素。若是使用 nth-child，則這個公式會選擇從偏移開始後面的全部元素。

最終咱們的購物車清單如圖 6 所示：

圖 6. 優化後的購物車清單

 

IE 的兼容方案

上面介紹的元素選擇器在最新版本的 Firefox、Chrome、Safari 和 Opera 中都能被識別，可是在 IE 8.0 及以前的版本中會徹底忽略它們。爲此，咱們須要準備一套兼容解決方案。

對於瀏覽器不兼容的問題，最普通並且確定有效的解決方案就是修改底層代碼。咱們能夠爲表格中各個單元格都賦予樣式。但這倒是最糟糕的解決方案，這樣會致使表現層和內容徹底混在一塊兒，之因此使用 CSS3 的元素選擇器也正是爲了儘可能避免這樣的問題，某天再也不須要額外的標記時，去掉它們也將是一項痛苦的工做。

咱們能夠採用一個很棒並且簡潔的工具 selectivizr,，它是一個 JavaScript 工具包，能夠在 IE 6 到 IE 8 的瀏覽器中模仿 CSS3，而咱們須要作的只是在頁面中添加一些腳本。

selectivizr 庫可使用 dojo、jQuery、Prototype 或者其餘 JavaScript 庫，但在這裏我推薦 NWMatcher 庫，由於這個庫對本文中使用的僞類支持的最好。

由於這是咱們僅僅針對 IE 制定的兼容解決方案，因此能夠把相關代碼都放在一個條件分支中，使其只在用戶使用 IE 瀏覽器時生效。

清單 16. IE 兼容解決方案

<!--[if (gte IE 6) & (lte IE 8)]> 
<script type="text/javascript" src="js/NWMatcher 1.2.5.js"></script>
<script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]-->

實現的效果圖如圖 7 所示：

圖 7. IE 瀏覽器中的購物車清單

用 CSS3 渲染頁面元素很是簡便，尤爲是當咱們沒法改變 HTML 結構時，無需添加額外的標記，僅僅利用語義層和新的元素選擇器就能夠渲染頁面元素，這樣代碼就變得更加易於維護了。

資源來源：http://www.ibm.com/developerworks/cn/