菜鳥工程師肉豬: CSS 選擇器 (CSS selectors) 簡介

什麼是CSS selectors（CSS選擇器）呢？CSS selectors是用來選取要套用CSS樣式的HTML元素的一種語法規則。

CSS selectors只是一個總稱，其實是多種不同的selectors總合，分為以下幾個大類：

Simple selectors

Combinators
Pseudo-elements

所謂的「一個selector」其實是指上面一個或多個simple selectors搭配cominators及pseudo-elements所組成一個選取特定HTML元素的選擇器。selector讓網頁前端開發人員能夠選取想要套用CSS樣式的HTML元素。

CSS selectors的語法跟HTML一樣都是case insensitive的，也就是大小寫沒有區別。

如果多個selectors要套用同一個CSS樣式，則每個selector用逗號(comma),隔開，例如下面三個type selector（元素類型選擇器）都要套用底色黃色(background-color:yellow;)的樣式，原本的寫法如下：

h1 {
    background-color:yellow;
}
h2 {
    background-color:yellow;
}
h3 {
    background-color:yellow;
}

而依照上面所述，可以將三個selector用逗號合併如下：

h1, h2, h3 {
    background-color:yellow;
}

其餘的CSS selectors用法，請查看每個selector大類項下各selectors的說明。

因為CSS selectors的種類很多，又有非常多的排列組合規則，而且要完成一個selector的寫法也有多種方式可達成，所以若要熟練地使用CSS selecotor，建議從大量的不同範例來練習熟悉每個語法使用上的特性與差異。

例如下面在<style>...</style>（內部樣式表(Internal style sheet)）綜合使用了Type selector，Child combinator及:nth-of-type() Pseudo-class來選取第一個<div>區塊下的<p>，並將底色改為黃色(background-color:yellow;)

<!DOCTYPE html>
<html>

<head>
    <style>
        body > div:nth-of-type(1) > div > p {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <div>
        <h1>區塊一標題</h1>
        <div>
            <p>區塊一段落文字</p><!-- 選取這個 -->
        </div>
    </div>

    <div>
        <h1>區塊二標題</h1>
        <div>
            <p>區塊二段落文字</p>
        </div>
    </div>

</body>
</html>

使用ID selector也能達到相同的目的。

<!DOCTYPE html>
<html>

<head>
    <style>
        /* body>div:nth-of-type(1)>div>p {
            background-color: yellow;
        } */
        #p1 {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <div>
        <h1>區塊一標題</h1>
        <div>
            <p id="p1">區塊一段落文字</p><!-- 選取這個 -->
        </div>
    </div>

    <div>
        <h1>區塊二標題</h1>
        <div>
            <p>區塊二段落文字</p>
        </div>
    </div>

</body>
</html>

從以上範例中，可以看出要達到同一個目的，有多種selector寫法。

那你可能會問：「那麼該用哪一種才是正確的呢？」，這問題並沒有標準答案，必須依你的使用情境(context)來決定該用哪種寫法。並且在達到原始目的的前提下，後續只有適不適合和好不好維護，修改及擴充的問題，這就牽涉到CSS的架構設計層面了，這只能透過大量的經驗與實際案例探討來獲得。若想要持續精進，與學習其他程式語言一樣，每一次解決問題後持續反思自己目前的寫法或設計是否有更好的做法。

參考：

Selectors

菜鳥工程師肉豬

網頁

2019/7/26

CSS 選擇器 (CSS selectors) 簡介

沒有留言:

張貼留言