本篇介紹CSS selectors的ID selectors（ID選擇器）的用法。
HTML元素可以用id屬性(id attribute)定義一個ID值。
HTML元素的ID在HTML文件中必須是唯一(unique)的，也就是說若有一個其他的HTML元素已經定義了ID值為dog，那就不可以有另一個元素定義相同的ID值(dog)，否則會出現非預期的結果。
例如下面定義<div>的id為dog。
<div id="dog">狗區塊</div>
而CSS的ID selectors就是針對HTML元素的id屬性值來做選取。
ID selectors一律使用井字符號#(number sign/hash sign)開頭，後接要選取的HTML元素的ID值。
例如下面使用ID selector #dog選取id="dog"的HTML元素，並套用CSS樣式把文字改為紅色(red)。
<!DOCTYPE html>
<html>
<head>
<style>
#dog {
color:red;
}
</style>
</head>
<body>
<div>普通區塊</div>
<div id="dog">狗區塊</div> <!-- ID selector #dog 選取的元素 -->
<div>普通區塊</div>
</body>
</html>
在瀏覽器顯示如下。
以上即是ID selectors的基本用法
再觀察以下。在原本的ID selector #dog新增了底色粉紅色(pink)；並使用Type selector選取<div>把底色改為橘色(orange)
這時候問題來了，Type selector套用的<div>元素底色為橘色，而ID selelctor套用所選的元素底色為粉紅色，那瀏覽器會怎麼顯示？
<!DOCTYPE html>
<html>
<head>
<style>
#dog {
color:red;
background-color: pink;
}
div {
background-color: orange;
}
</style>
</head>
<body>
<div>普通區塊</div>
<div id="dog">狗區塊</div>
<div>普通區塊</div>
</body>
</html>
從以上的顯示結果來看，當某個元素同時套用了Type selector與ID selector的CSS樣式時，ID selector的效果會優先於Type selector。
關於CSS selectors套用CSS樣式的優先順序的問題請見CSS selector's specificity（CSS選擇器優先權 or CSS選擇器權重）。
沒有留言:
張貼留言