CSS多個class共用寫法

一、定義多個class

在CSS中，可以為同一元素定義多個class，以實現不同樣式的復用。

<div class="box red"></div>

.box {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}

上述代碼中，通過給div元素同時添加box和red兩個class，實現了寬高為100px且背景為紅色的效果。其中.box為通用樣式類，.red為特定樣式類。

二、使用組合選擇器

除了定義多個class外，還可以使用組合選擇器來實現多個class的復用。

<div class="box"></div>
<div class="box green"></div>

.box {
  width: 100px;
  height: 100px;
}

.green.box {
  background-color: green;
}

上述代碼中，通過使用組合選擇器.green.box，僅對同時擁有.green和.box兩個class的div元素加上背景色為綠色的樣式。

三、使用屬性選擇器

屬性選擇器也可以實現多個class的復用，比如通過[class*=”box”]來選擇所有包含box的class。

<div class="box"></div>
<div class="container box"></div>

[class*="box"] {
  width: 100px;
  height: 100px;
}

.container [class*="box"] {
  background-color: gray;
}

上述代碼中，通過[class*=”box”]來選擇所有包含box的class，對這些元素設置寬高為100px。另外，通過.container [class*=”box”]來選擇所有在.container下的元素中含有box的class，對這些元素設置背景色為灰色。

四、使用偽類

在某些場景下，可以使用偽類來實現多個class的復用，比如:hover來實現鼠標懸浮效果。

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box:hover {
  background-color: green;
}

上述代碼中，當鼠標懸浮在.box元素上時，其背景色會變為綠色。

五、使用CSS預處理器

在大型項目中，為了避免CSS的複雜度，可以使用CSS預處理器來簡化編寫。

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;

  &.green {
    background-color: green;
  }
}

上述代碼中，使用Sass預處理器中的&和.符號來實現多個class的復用。當.box元素同時擁有.green類時，其背景色會變為綠色。