使用 class
在 HTML 中使用 class 時只需要寫上class="class_name"即可，舉個例子，想在 div 中 使用 名為 box 的 class，則如下：
<div class="box"></div>
這個box就是自訂 CSS 的 class 名稱，它可以是任何名稱，你也可以取名為content等，而在 CSS 樣式表中box的格式通常如下：
.box {
/* 設定在這裡 */
}
接著把想設定的內容寫在 {} 中即可，例如設定寬（width）為 300px ，則如下：
.box {
width: 300px;
}
使用多個 class
有時候我們會需要使用多個 class，這時候只需要加上空白，再寫第二個 class 即可，例如想要使用 box 和 content 兩個 class ，則如下：
<div class="box content"></div>
如果是要在 CSS 中需要同時設定兩個 class 的內容，那麼只需要在兩個 class 中加上英文逗號即可，如下：
.box, .content {
font-size: 16px;
}
如果在多個 class 中有相同的屬性，則以最後一個為主，前面的 class 屬性會被覆蓋而失效。
.box, .content {
font-size: 16px;
}
.box {
font-size: 18px;
}
上面這個例子，content 的文字大小會是 16px，box 的文字大小則是 18px，原本 box 中的 16px 被覆蓋而失效。
class 階層
如果在 CSS 樣式表中設定多個 class 卻沒有加上逗點，則是階層的意思，例如.box a，這意思是在 box 中的 a（連結）。
.box a {
color: red;
}
註解
在 CSS 樣式表中如果要加上註解，只需要在文字前後加上/* */即可，範例如下：
.box {
font-size: 20px; /* 文字大小 */
color: black; /* 文字顏色 */
}
實際操作
See the Pen multiple class CSS by kumo (@kumo-tw) on CodePen.
本文是否對您有幫助？