給元素一個類

類是它們被分配給的元素的識別符號。使用 class 屬性將類分配給元素。

<div class="example-class"></div>

要為元素分配多個類，請使用空格分隔類名。

<div class="class1 class2"></div>

在 CSS 中使用類

類可用於設定某些元素的樣式，而無需更改該類的所有元素。例如，這兩個 span 元素可以具有完全不同的樣式：

<span></span>
<span class="special"></span>

可以為頁面上的任意數量的元素提供相同名稱的類，並且它們都將接收與該類關聯的樣式。除非你在 CSS 中指定元素，否則這將始終為 true。

例如，我們有兩個元素，都是 highlight 類：

<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>

如果我們的 CSS 如下所示，那麼綠色將應用於兩個元素中的文字：

.highlight { color: green; }

但是，如果我們只想用 highlight 定義 div，那麼我們可以新增如下特性：

div.highlight { color: green; }

然而，當使用 CSS 進行樣式化時，通常建議僅使用類（例如 .highlight）而不是使用類的元素（例如 div.highlight）。

與任何其他選擇器一樣，類可以巢狀：

.main .highlight { color: red; } /* Descendant combinator */ 
.footer > .highlight { color: blue; } /* Child combinator */ 

你還可以將類選擇器連結到僅選擇具有多個類組合的元素。例如，如果這是我們的 HTML：

<div class="special left menu">This text will be pink</div>

我們想要將這段特定的文字粉紅色，我們可以在 CSS 中執行以下操作：

.special.left.menu { color: pink; }