從這篇文章開始，將是對於《精通CSS：高階Web標準解決方案》的學習筆記

1.為什麼為元素新增ID和類名

HTML 4是作為簡單的文件標記語言建立的，而不是介面語言。因此，沒有由於內容區域或導航欄等的專用元素。在HTML 5中這些問題得到了部分解決，如header、nav、article、section、footer等結構性元素。還有一種次優的解決方案，是為現有元素新增ID或類名為它們賦予額外的意義，並能夠給樣式提供有用的鉤子（hook）。

2.為元素命名

應根據它們是什麼來為元素命名，而不應該根據它們的外觀如何來命名。例如，想讓頁面的通知訊息顯示為紅色，應使用如.waring或.notification來命名，而不是使用red等。當使用red命名時，如果頁面中存在其他紅色元素，對於類所引用的元素就會存在混亂。

類名和ID名需要區分大小寫，如.andybudd和.andyBudd是不同的類名。可以採用駝峰式(CamelCase)或者全小寫單詞之間以連字元(-)分隔，如andyBudd或者andy-budd。

3.使用ID還是類

一般原則是，類應該用在概念上相似的元素，這些元素出現在同一頁面上的多個位置，而ID應該用於不同的唯一元素。而哪些元素是唯一的呢？

對於ID，只有在絕對確定這個元素只會出現一次的情況下，才應該使用ID；如果以後可能需要相似的元素，就是用類。避免建立非常長、非常複雜的明明約定。而對於類，因為其靈活性，其可能被過度使用或濫用。CSS新手常常為所用東西都新增上類，從而試圖更精細地控制它們的樣式，這會在文件中新增大量無意義的程式碼。當類名中出現了重複的單詞，就應該考慮從是否可以把這些元素分解成它們的組成部分，這會讓程式碼更元件化，大大提高靈活性。

<h2 class="news-head">這裡是新聞的標題</h2>
  <p class="news-text">
    這裡是新聞的主體內容
  </p>
<p class="news-text"><a href="news.php" class="news-link">更多</a></p>

新增一個例子，包含新聞的標題、主體和連結，通過使用一個與新聞有關的類名，每個元素都被標識為新聞的一部分。但是並不需要用這麼多類來區分各個元素。可以將新聞放在一個部分中，加上類名news，然後使用層疊(cascade)來標識新聞標題和文字。

<div class="news">
  <h2>這裡是新聞的標題</h2>
  <p>
    這裡是新聞的主體內容
  </p>
  <p><a href="news.php">更多</a></p>
</div>

<style>
  .news p:first-child{
    /*這裡選擇了.news中的第一個p元素，即新聞的文字*/
  }
</style>