類名選擇器

類名選擇器選擇具有目標類名的所有元素。例如，類名 .warning 將選擇以下 <div> 元素：

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

你還可以更具體地將類名組合到目標元素。讓我們以上面的例子為基礎，展示一個更復雜的類選擇。

CSS

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

HTML

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

在這個例子中，與 .warning 類的所有元素都會有一個藍色的文字顏色，隨用隨 .important 類元素有一個橙色的文字顏色，並有所有的元素都在 .important 和 .warning 類名稱將有紅色文字的顏色。

請注意，在 CSS 中，.warning.important 宣告在兩個類名之間沒有任何空格。這意味著它只會在 class 屬性中找到包含類名 warning 和 important 的元素。這些類名可以在元素上以任何順序排列。

如果 CSS 宣告中的兩個類之間包含空格，則只會選擇具有 .warning 類名的父元素和具有 .important 類名的子元素的元素。