3.4-class-he-id.md

3.5 Selectors - class 和 id

在 html 當中的任何標籤，都可以給定 class 和 id 這兩個屬性：

class：表示樣式表的名稱。該名稱可以套用至多個元素上。

id：表示該元素的唯一名稱。在一個網頁當中，同樣的 id 名稱，不能重覆。

範例 1

<h1 class="title1">這是內文標題</h1>
<p id="the_para">這是段落</p>

這時，在 css 中，就可以透過 class 或 id 來套上樣式。例：

/* . 符號表示 class 的名稱 */
.title1{
  color: blue;
}

/* # 符號表示 id 的名稱 */
#the_para{
  color: red;
}

範例 2

同一個元素，可以套用多個樣式名稱，以 **空格 **來做區隔，如下範例，會套用 title1 和 change_size 這兩個樣式：

<h1 class="title1 change_size">這是內文標題</h1>

這時 <h1> 會套用以下兩個 CSS 的樣式表：

.title1{
  color: blue;
}

.change_size{
  /* 文字大小設定成 20px */
  font-size: 20px;
}

註：id 屬性就沒有這種特性，一個元素不能有不同的 id。

範例3

元素標籤與 class 或 id 一起套用：

<h1 class="title1">這是h1內文標題</h1>
<h2 id="title2">這是h2內文標題</h2>

h1.title1{
  color: red;
}
h2#title2{
  color: blue;
}

範例4

在 CSS 中，撰寫同時有兩個樣式以上的寫法：

<h1 class="title1">這是h1內文標題</h1>
<h1 class="title1 other_style">這是h1內文標題</h1>

h1.title1{
  color: red;
}

/* h1 元素有 title1 樣式，同時也有 other_style 樣式，則會套用 */
h1.title1.other_style{
  border: 1px solid red;
}