• class選擇器
  如果只想在特定的區域套用裝飾，可以在HTML檔裡加入class屬性，如下所示:

<footer>
<p class="pagetop"><a href="#top">回到本頁開頭</a></p>
</footer>

我只想裝飾回到本頁開頭，所以便在它的p標籤裡加上「class="pagetop"」。
接著打開CSS檔，使用class屬性來設定CSS:

/*點+class屬性的值即為class選擇器*/
.pagetop{
     text-align: center;    
}

會發現只有回到本頁開頭套用了樣式，其他的p元素並未產生其他變化。

• id選擇器
  如果要設定書籤連結的移動目標，可以在HTML檔裡加入id屬性，如下所示:
  
  我只想裝飾簡介的部分，所以便在它的article標籤裡加上「id="profile"」。
  接著打開CSS檔，使用id屬性來設定CSS:

/*井字號+id屬性的值即為id選擇器*/
#profile{
    background: #3b4458;
    color: #ffffff;
}

成功設定背景及文字顏色。

class屬性和id屬性乍看下功能好像一模一樣，但他們還是有一些不同的，例如id屬性除了可以在CSS中使用外，也可以設定書籤連結的移動目標。除此之外，class屬性可以在網頁設定很多相同的值，而id屬性一個值只能設定一次。基本上，以CSS裝飾網站時，使用class屬性較佳，但如果想強調那個元素是網站獨一無二的部分時就可以使用id屬性。