CSS - 屬性選擇器

上一頁
下一頁

CSS 屬性選擇器用於選擇具有特定屬性或屬性值的HTML元素。屬性選擇器用方括號[ ]括起來，並且可以採用多種形式。

如下所示，您可以看到如何在CSS中根據屬性選擇HTML元素。

/* Selects all anchor tags having target attribute */
a[target] {
    color: green;
}

屬性選擇器是CSS中的一種選擇器型別。要了解CSS中的所有選擇器，請檢視CSS 選擇器文章。

目錄


 

CSS [attribute] 選擇器

此選擇器選擇具有指定屬性的元素，無論其值或元素型別如何。

語法

[attribute]{
    property: value;
}

下面的示例使用了data-toggle屬性，這是一個自定義資料屬性，瞭解更多關於data-* 屬性的資訊。

示例

以下是一個選擇所有具有“data-toggle”屬性的HTML元素的示例

<!DOCTYPE html>
<html>

<head>
    <style>
        [data-toggle] {
            background: lightgray;
            padding: 10px;
            color: black;
        }
    </style>
</head>

<body>
    <div data-toggle="yes">
        The div with data-toggle="yes" attribute
    </div>
    <div>
        The div without data-toggle attribute
    </div>
    <p data-toggle="no">
        A paragraph with data-toggle="no" attribute
    </p>
    <p>
        A paragraph without data-toggle attribute
    </p>
</body>

</html>

CSS [attribute="value"] 選擇器

此選擇器選擇具有特定屬性和特定值的元素。

語法

[attribute="value"]{
    property: value;
}

示例

此選擇器選擇所有值為“yes”的'data-toggle'屬性的元素。

<!DOCTYPE html>
<html>

<head>
    <style>
        [data-toggle="yes"] {
            background: lightgray;
            padding: 10px;
            color: black;
        }
    </style>
</head>

<body>
    <div data-toggle="yes">
        The div with data-toggle="yes" attribute
    </div>
    <div>
        The div without data-toggle attribute
    </div>
    <p data-toggle="no">
        A paragraph with data-toggle="no" attribute
    </p>
    <p>
        A paragraph without data-toggle attribute
    </p>
</body>

</html>

CSS [attribute*="value"] 選擇器

此選擇器選擇具有特定屬性且值包含特定子字串的元素。

語法

[attribute*="value"]{
    property: value;
}

示例

此選擇器選擇所有“src”屬性中路徑包含“css”的元素。

<!DOCTYPE html>
<html>

<head>
    <style>
        img{
            height: 50px;
            width: 150px;
        }
        [src*="css"] {
            border: 2px solid;
        }
    </style>
</head>

<body>
    <p>
        Style applied to src attribute containing string 'css' in it
    </p>
    <img alt="Logo" src = "/css/images/logo.png" />
    <img alt="Logo" src = "/html/images/logo.png" />
</body>

</html>

CSS [attribute^="value"] 選擇器

此選擇器選擇具有以特定字串開頭的特定屬性的元素。

語法

[attribute^="value"]{
    property: value;
}

示例

此選擇器選擇所有“href”屬性以“https://”開頭的元素。

<html>

<head>
    <style>
        [href^="https"] {
            background: lightgray;
            color:black;
        }
    </style>
</head>

<body>
    <a href="https://tutorialspoint.tw">HTTPS Link</a> 
    <br> <br>
    <a href="https://tutorialspoint.tw">HTTP Link</a>
</body>

</html>

CSS [attribute$="value"] 選擇器

此選擇器選擇具有以特定字串結尾的特定屬性的元素。

語法

[attribute$="value"]{
    property: value;
}

示例

此選擇器選擇所有“src”屬性以“.png”結尾的元素。

<!DOCTYPE html>
<html>

<head>
    <style>
        img{
            height: 50px;
            width: 150px;
        }
        [src$=".png"] {
            border: 2px solid;
        }
    </style>
</head>

<body>
    <p>
        Style applied to src attribute's value ends with '.png'
    </p>
    <img alt="Logo" src = "/images/logo.jpg" />
    <img alt="Logo" src = "/html/images/logo.png" />
</body>

</html>

CSS [attribute|="value"] 選擇器

此選擇器選擇具有特定屬性的元素，其值以指定的子字串開頭，後跟一個連字元 (-)。此選擇器通常用於選擇具有特定語言屬性的元素，例如lang屬性，這些屬性通常使用連字元來表示語言子程式碼。

語法

[attribute|="value"]{
    property: value;
}

示例

此選擇器選擇所有以“en”開頭，後跟連字元的“lang”屬性的元素。

<html>

<head>
    <style>
        [lang|="en"] {
            background: lightgray;
            padding: 10px;
            color: black;
        }
    </style>
</head>

<body>
    <div lang="en"> This is a div in English! </div>
    <p lang="en-US"> This paragraph is in American English. </p>
    <p lang="en-GB"> This paragraph is in British English. </p>
    <div lang="fr"> Bonjour tout le monde en français! </div>
    <div lang="es"> Hola Mundo en español! </div>
</body>

</html>

CSS [attribute~="value"] 選擇器

此選擇器用於選擇具有特定屬性的元素，其值包含指定的單詞。該單詞應是一個獨立的單詞，周圍是空格或位於屬性值的開頭或結尾。

語法

[attribute~="value"]{
    property: value;
}

示例

此選擇器選擇所有“class”屬性包含“highlight”單詞的元素。

<html>

<head>
    <style>
        [class~="highlight"] {
            background: yellow;
            padding: 10px;
            color: black;
        }
    </style>
</head>

<body>
    <div class="highlight"> 
        This is a highlighted div! 
    </div>
    <p class="highlight special"> 
        This paragraph is highlighted and special. 
    </p>
    <p class="special"> 
        This paragraph is special but not highlighted. 
    </p>
    <div class="note"> 
        This is just a note. 
    </div>
    <div class="highlight note"> 
        This note is highlighted. 
    </div>
</body>

</html>

輸入的屬性選擇器

屬性選擇器可以用來根據特定條件（例如它們的型別、名稱、值或其他屬性）選擇input元素。

示例

<html>
<head>
    <style>
        /* Applies to all input tags */
        input {
            display: block;
            margin: 10px;
            padding: 5px;
        }
        /* Applies to input tags with type attribute */
        input[type] {
            border: 1px solid gray;
        }
        /* Applies to input tag with placeholder value as name */
        input[placeholder="name"] {
            border: 1px solid #f00;
        }
        /* Applies to input tags name attribute value start with "emailid" */
        input[name|="emailid"] {
            background-color: rgb(236, 178, 233);
        }
        /* Applies to input type attributes value containing "sub" string in it */
        input[type~="sub"] {
            background-color: rgb(88, 241, 88);
            padding: 10px;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="Username">
    <input type="text" placeholder="name">
    <input type="email" placeholder="Email" name="emailid">
    <input type="submit" placeholder="Submit">
</body>
</html>

語言的屬性選擇器

您可以使用lang屬性根據其語言選擇元素。lang屬性指定元素中包含文字的語言。

示例

<html>
<head>
    <style>
        div[lang] {
            color: red;
        }
        div[lang="fr"] {
            color: blue;
        }
        div[lang~="es"] {
            color: green;
        }
        div[lang|="de"] {
            color: orange;
        }
        div[lang^="it"] {
            color: purple;
        }
        div[lang$="ja"] {
            color: brown;
        }
        div[lang*="zh"] {
            color: teal;
        }
    </style>
</head>

<body>
    <div lang="en">Hello World in English!</div>
    <div lang="fr">Bonjour tout le monde en français!</div>
    <div lang="es">Hola Mundo en español!</div>
    <div lang="ja">こんにちは、日本語で世界！</div>
    <div lang="de">Hallo Welt auf Deutsch!</div>
    <div lang="it">Ciao Mondo in italiano!</div>
    <div lang="zh">你好世界，中文！</div>
</body>
</html>

CSS 多個屬性選擇器

CSS多個屬性選擇器允許您根據多個屬性值選擇元素。它用於定位滿足多個條件的特定元素。

示例

<html>
<head>
<style>
    /* Remove bullet points from list items */
    ul {
        list-style: none;
    }

    /* Target all anchor elements with an href attribute */
    a[href] {
        color: rgb(231, 11, 194);
    }

    /* Target anchor elements with both specific href values and file extension */
    a[href="css_backgrounds.htm"][href$=".htm"] {
        background-color: lightgray;
        padding: 5px;
    }

    /* Target anchor elements with a specific href value */
    a[href="css_colors.htm"] {
        color: rgb(51, 255, 0);
    }
</style>
</head>

<body>
    <ul>
        <li><a href="css_text.htm">
            CSS Text
        </a></li>
        <li><a href="css_backgrounds.htm">
            CSS Background
        </a></li>
        <li><a href="css_colors.htm">
            CSS Color
        </a></li>
    </ul>
</body>

</html>
要了解有關其他選擇器的更多資訊，請檢視此CSS 選擇器文章。
列印頁面
上一頁
下一頁
廣告