網頁

2019/8/17

CSS Attribute selectors 屬性選擇器

本篇介紹CSS selectors的Attribute selectors(屬性選擇器)的用法。


HTML元素有各種屬性(Attributes),有些是任何元素都可有的屬性,稱為Global attributes,例如idclassstylelang等;而有些屬性在特定HTML元素才有,例如<label>for屬性,<input>placeholder屬性。

下面範例中各HTML元素分別定義了不同的屬性:

  • <div>定義了class屬性
  • <label>定義了for屬性
  • <input>定義了idtypeplaceholder屬性。
<div class="field">
    <label for="username">Username</label>
</div>
<div class="field">
    <input id="username" type="text" placeholder="輸入姓名">
</div>

CSS的Attribute selectors就是針對HTML元素的屬性(attribute)特性來選取,包括以下多種選取方法。


[att]

以元素的屬性名稱選取該元素。

例如下面的Attribute selectors分別為div[id]div[class],只要元素中有符合的屬性名稱就會被選取。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px;
        }

        div[id] {
            background-color: yellow;
        }
        div[class] {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="d1">DIV d1</div>
    <div id="d2">DIV d2</div>
    <div>DIV d3</div>
    <div class="c1">DIV c1</div>
    <div class="c2">DIV c2</div>
    <div>DIV c3</div>
</body>

</html>




[att=val]

以元素的屬性名稱及相同值選取該元素。

例如下面的Attribute selectors分別為div[id="d1"]div[class="c1"],只要元素中有符合的屬性名稱及值相同就會被選取。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px;
        }

        div[id="d1"] {
            background-color: yellow;
        }
        div[class="c1"] {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="d1">DIV d1</div>
    <div id="d2">DIV d2</div>
    <div>DIV d3</div>
    <div class="c1">DIV c1</div>
    <div class="c2">DIV c2</div>
    <div>DIV c3</div>
</body>

</html>




[att~=val]

以元素的屬性名稱及空白分隔的多個值其中之一相同來選取該元素。

例如下面的Attribute selectors為div[class~="c2"],只要元素中有符合的屬性名稱及有一個值或多個以空白分開的值,其中之一符合則會被選取。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px;
        }

        div[class~="c2"] {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="d1">DIV d1</div>
    <div id="d2">DIV d2</div>
    <div>DIV d3</div>
    <div class="c1 c2 c3">DIV c1</div>
    <div class="c2">DIV c2</div>
    <div>DIV c3</div>
</body>

</html>




[att|=val]

以元素的屬性名稱及相同值或開頭相同且後面接以-的值來選取該元素。

例如下面的Attribute selectors分別為div[id|="d1"]div[class|="c2"]div[class|="c3"],只要元素中有符合的屬性名稱及值相同或值開頭相同且後面接以-則會被選取。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px;
        }

        div[id|="d1"] {
            background-color: yellow;
        }
        div[class|="c2"] {
            background-color: orange;
        }
        div[class|="c3"] {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="d1-d2">DIV d1</div>
    <div id="d2-d1">DIV d2</div>
    <div>DIV d3</div>
    <div class="c1-c2 c2-c1">DIV c1</div>
    <div class="c2-c1">DIV c2</div>
    <div class="c3">DIV c3</div>
</body>

</html>




[att^=val]

以元素的屬性名稱及開頭相同的值來選取該元素。

例如下面的Attribute selectors分別為div[id^="d1"]div[class^="c2"],只要元素中有符合的屬性名稱且值開頭相同則會被選取。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px;
        }

        div[id^="d1"] {
            background-color: yellow;
        }
        div[class^="c2"] {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="d11">DIV d1</div>
    <div id="d12">DIV d2</div>
    <div>DIV d3</div>
    <div class="c1">DIV c1</div>
    <div class="c22">DIV c2</div>
    <div class="c32 c2">DIV c3</div>
</body>

</html>




[att$=val]

以元素的屬性名稱及結尾相同的值來選取該元素。

例如下面的Attribute selectors分別為div[id$="d1"]div[class$="c2"],只要元素中有符合的屬性名稱且值結尾相同則會被選取。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px;
        }

        div[id$="d1"] {
            background-color: yellow;
        }
        div[class$="c2"] {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="d1">DIV d1</div>
    <div id="d2 d1d2">DIV d2</div>
    <div id="d3d1">DIV d3</div>
    <div class="c1c2c1">DIV c1</div>
    <div class="c2">DIV c2</div>
    <div class="c3 c1c2">DIV c3</div>
</body>

</html>




[att*=val]

以元素的屬性名稱及值中有相同的字串來選取該元素。

例如下面的Attribute selectors分別為div[id*="d1"]div[class*="c2"],只要元素中有符合的屬性名稱且值的字串中有相同的會被選取。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px;
        }

        div[id*="d1"] {
            background-color: yellow;
        }
        div[class*="c2"] {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="d1d2d3">DIV d1</div>
    <div id="d2d1d3">DIV d2</div>
    <div id="d3d2d1">DIV d3</div>
    <div class="c1c2c3">DIV c1</div>
    <div class="c2c3c1">DIV c2</div>
    <div class="c3c1c2">DIV c3</div>
</body>

</html>




總之Attribute selectors的種類及變化很多,要仔細觀察及多加練習才不會搞錯。


參考:

沒有留言:

張貼留言