CSS 之 Class Selector . | 點燈坊

Class Selector 為 CSS 最常用的 Selector，實務上常看到幾種寫法：.box1, box2、.box1 .box2 與 .box1.box2，因為很像很容易誤會其意義。

Version

CSS 3

Class Selector

使用 class selector 各自描述 Box 1 與 Box 2。

<template>
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</template>

<style scoped>
.box1 {
  font-size: 30px;
  color: red;
}

.box2 {
  font-size: 30px;
  color: red;
}
</style>

第 2 行

<div class="box1">Box 1</div>

HTML 部分有 <div>，以 class attribute 使用 box1 class。

第 7 行

.box1 {
  font-size: 30px;
  color: red;
}

.box2 {
  font-size: 30px;
  color: red;
}

既然 <div> 使用了 box1 class，CSS 部分若要以 class selector 描述 <div>，selector 語法為 . + class 名稱。

每個 class 各自描述，這是最基本，也最不會搞混的寫法。

Class selector 可套用在多個 HTML element，沒有 side effect，重複使用程度最高，還可以透過多個 class 組合 CSS property，實務上使用最多的是 class selector

[class="box1"] {
  font-size: 30px;
  color: red;
}

[class="box2"] {
  font-size: 30px;
  color: red;
}

因為 CSS class 用於 HTML 的 class attribute，因此也可以使用 attribute selector 表示。

其中 class="box1" 表示 class attribute 等於 box1，所以等效於 .box1。

雖然語法等效，但實務上不會這樣寫

Grouping Selector

使用 grouping selector 讓 Box 1 與 Box 2 不用重複定義。

<template>
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</template>

<style scoped>
.box1, .box2 {
  font-size: 30px;
  color: red;
}
</style>

第 7 行

.box1, .box2 {
  font-size: 30px;
  color: red;
}

class 之間以 , 隔開，表示這兩個 class 共用相同的 property，為了避免重複，所以寫在一起。

Descendant Combinator

使用 descendant combinator 選取巢狀 tag。

<template>
  <div class="box1">
    Box 1
    <div class="box2">Box 2</div>
    <div class="box3">Box 3
      <div class="box2">Box 2</div>
    </div>
  </div>
</template>

<style scoped>
.box1 .box2 {
  font-size: 30px;
  color: red;
}
</style>

12 行

.box1 .box2 {
  font-size: 30px;
  color: red;
}

Class 之間以 空白 隔開，表示 box1 下所有 box2 均受影響。

因此 box3 下的 box2 也會受影響， 因為都在 box1 下。

Multiple Class Selector

使用 multiple class selector 選擇同時使用多個 class 的 tag。

<template>
  <div class="box1 box2">
    Box 1 Box 2
  </div>
  <div class="box1">
    Box 1
    <div class="box2">
      Box 2
    </div>
  </div>
</template>

<style scoped>
.box1.box2 {
  font-size: 120%;
  color: #ff0000;
}
</style>

14 行

.box1.box2 {
  font-size: 120%;
  color: red;
}

Class 之間直接連在一起，表示當 box1 與 box2 組合在一起時才會受影響。

Conclusion

• Class selector 使用 . + class 名稱 描述，且可套用多個 HTML element，side effect 最小，實務上使用最多的是 class selector
• 由於 class 以 空白隔開 與 連在一起 意義不一樣，所以 class 之間是否有 空白 就非常重要，不再只是 coding style 而已

Reference

MDN, Class selector