本篇介紹CSS selectors的Class selectors（類選擇器）的用法。
HTML元素可以用class屬性(class attribute)定義多個class值。
此外一個class值可以重複在多個HTML元素中使用，與ID只能用在唯一的HTML元素不同。
例如下面定義<div>的class為big dog，也就是定義兩個class值。
<div class="big dog">大狗區塊</div>
而CSS的Class selectors就是針對HTML元素的class屬性值來選取。
Class selectors以「點」浮號.(period/full stop)開頭，然後緊接著HTML元素的class值。
例如下面使用.big選取class屬性有big的HTML元素，並套用把字體變大的CSS樣式；
使用.red選取class屬性有red的HTML元素，並套用把文字顏色變紅色的CSS樣式。
若一個HTML元素的class屬性同時具有上述兩種class值，則會同時套用兩種CSS樣式。
<!DOCTYPE html>
<html>
<head>
<style>
.red {
color:red;
}
.big {
font-size: 24px;
}
</style>
</head>
<body>
<div>普通文字區塊</div>
<div class="red">紅色文字區塊</div>
<div class="big">較大文字區塊</div>
<div class="big red">較大紅色文字區塊</div>
</body>
</html>
在瀏覽器顯示如下。
以上即是Class selectors的基本用法。
參考：
沒有留言:
張貼留言