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.com">HTTPS Link</a> 
    <br> <br>
    <a href="https://tutorialspoint.com">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 选择器文章。
打印页面
上一页
下一页
广告