up
down
Close
架站盒子
Web Development Box
 

CSS 使用一個或多個 class 的方法

│ 3875 Views │ CSS
CSS 使用一個或多個 class 的方法
CSS 使用一個或多個 class 的方法
  1. 使用 class
  2. 使用多個 class
  3. 階層
  4. 註解
  5. 實際操作

使用 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.

 

延伸閱讀

本文是否對您有幫助?