網頁

2019/7/28

CSS ID selectors ID選擇器

本篇介紹CSS selectorsID selectors(ID選擇器)的用法。

HTML元素可以用id屬性(id attribute)定義一個ID值。

HTML元素的ID在HTML文件中必須是唯一(unique)的,也就是說若有一個其他的HTML元素已經定義了ID值為dog,那就不可以有另一個元素定義相同的ID值(dog),否則會出現非預期的結果。


例如下面定義<div>iddog

<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選擇器權重)。


沒有留言:

張貼留言