本篇介紹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選擇器權重)。
沒有留言:
張貼留言