DAY 6. CSS 選擇器 Selector (實際範例)

在前面幾天我們陸陸續續地複習了幾個常用的CSS 選擇器 Selector
我將在這篇中使用table來講解一些實務中常用到的偽類別
目的是使我們所建立的表格可以有更佳的可讀性，並且不在必要時刻不使用class

首先建立一個簡單的表格，與其內容
點擊範例JSBin以查看執行結果。

<table>
  <caption>水果介紹</caption>
  <thead>
    <tr>
      <th>中文名稱</th>
      <th>英文名稱</th>
      <th>盛產季節</th>
      <th>盛產國家</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="4">資料僅供範例使用<br>實際資訊請自行查證。</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>香蕉</td>
      <td>Banana</td>
      <td>四季</td>
      <td>台灣</td>
    </tr>
    <tr>
      <td>鳳梨</td>
      <td>Pineapple</td>
      <td>四季</td>
      <td>台灣</td>
    </tr>
    <tr>
      <td>蘋果</td>
      <td>Apple</td>
      <td>7-10月</td>
      <td>台灣</td>
    </tr>
  </tbody>
</table>

接著我將說明直接註解於CSS區塊內

/*
 | 這是全域通用樣式，並非本範例重點
 */
body {
  margin: 0;
  padding: 0;
  color: #333;
  font-size: 16px;
  box-sizing: border-box;
}

/*
 | 表格基礎樣式
 */
table {
  margin: 0 auto;
  max-width: 500px;
  border-collapse:collapse;
  border: 1px solid #888;
}

/*
 | 表格主體上與下增加邊框以凸顯主體內容
 */
tbody {
  border-top: 1px dotted #888;
  border-bottom: 1px dotted #888;
}

/*
 | 添加內距至表個欄位之中，讓表格內容更加清晰
 */
caption, th, td {
  padding: 5px;
}

/*
 | 使用偽類別:first-line製作foot小標
 */
tfoot td:first-line {
  color: #888;
  font-size: 12px;
  font-weight: bold;
}

/*
 | 使用偽類別:nth-child，將改變基數行背景色，使表格更加易讀
 | 亦可使用 :nth-child(even) 改變偶數元素樣式
 | 亦可使用 :nth-child(odd) 改變基數元素樣式
 */
tbody tr:nth-child(2n+1) {
  background: #f1f1f1;
}

/*
 | 使用偽類別:hover，強調與提示使用者目前滑鼠在哪一行內文
 */
tbody tr:hover {
  background: yellow;
}

/*
 | 使用偽類別:first-child，將第一欄文字改為藍色
 */
tbody td:first-child {
  color: blue;
}

/*
 | 使用偽類別:last-child，將第一欄文字改為綠色
 */
tbody td:last-child {
  color: green;
}

/*
 | 最後一個範例主要強調我們可以將多個偽類別:not連接使用
 | 想像是將上一個Selector的結果過濾再過濾
 | 這個範例我第一個:not先過濾順序於3以上的元素
 | 接著再將剩下的1, 2元素再使用:not過濾掉第1個元素
 | 因此最後結果是只有tbody td裡頭的第二個td文字被加粗
 | 當然想達成一樣效果直接使用:nth-child(2) 才是最直接的
 */
tbody td:not(:nth-child(n+3)):not(:first-child) {
  font-weight: 900;
}

點擊範例JSBin以查看執行結果。

這個範例簡單卻又實用，
而不僅僅是表格, 當我們需要陳列多筆資料，
好好的運用:nth-child與其他偽類別是必不可少的。

最後，像這樣沒給class但又對裡頭的元素進行了樣式修改
其實可以定義一個css namespace意思是指我們只要給table一個class
接著將樣式定義於table.class-name底下，就能在不污染全域table的情況下達到一樣的效果
這樣的行為在沒有使用css 預處理器時相當麻煩，因此在了解了css的特定度以及選擇器之後
下一步該學習的就是CSS 預處理器