【CSS】属性选择器

原创已于 2023-03-26 09:04:38 修改 · 716 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2022-06-16 22:40:30 首次发布

Css/Html 专栏收录该内容

51 篇文章

订阅专栏

本文深入探讨了CSS选择器的各种类型，包括基础的[attr]、[attr=value]、[attr~=value]和[attr|=value]，以及更复杂的[attr^=value]、[attr$=value]和[attr*=value]。通过示例代码，详细解释了这些选择器如何匹配元素属性及其值，帮助开发者更好地理解和利用CSS进行精准样式控制。

存否和值选择器

选择器	示例	描述
[attr]	a[title]	匹配带有一个名为attr的属性的元素——方括号里的值。
[attr=value]	a[href=“https://example.com”]	匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。
[attr~=value]	p[class~=“special”]	匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。
[attr 竖线 =value]	div[lang 竖线=“zh”]	匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。

1. [attr] 匹配带有一个名为attr的属性的元素——方括号里的值。

<html>
    <head>
        <style type="text/css">
            a[href] {background-color: #009966;}
        </style>
    </head>
    <body>
        <h2>[attr]</h2>

        <p><a name="anchor">不存在href属性</p>
        <p><a href="#">存在属性href</p>
    </body>
</html>

在这里插入图片描述
2.[attr=value] 匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。

<html>
    <head>
        <style type="text/css">
            a[href="http://wwww.baidu.com"] {background-color: #009966;}
        </style>
    </head>
    <body>
        <h2> a[href="http://wwww.baidu.com"]</h2>
        <p><a name="wwww.baidu.com">wwww.baidu.com</p>
        <p><a href="http://wwww.baidu.com">http://wwww.baidu.com</p>
    </body>
</html>

在这里插入图片描述
3.[attr~=value] 匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。

<html>
    <head>
        <style type="text/css">
            [class~="first"] {background-color: #009966;}
        </style>
    </head>
    <body>
        <h2> [class~="first"]</h2>
        <p><a class="first">first</p>
        <p><a class="first second">first second</p>
        <p><a class="second first ">second first </p>
    </body>
</html>

在这里插入图片描述
**4.[attr |=value] 匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。连接符- **

<html>
    <head>
        <style type="text/css">
            [class|="first"] {background-color: #009966;}
        </style>
    </head>
    <body>
        <h2> [class|="first"]</h2>
        <p><a class="first">first</p>
        <p><a class="first second">first second</p>
        <p><a class="first-second">first-second</p>
        <p><a class="second first ">second first </p>
    </body>
</html>

在这里插入图片描述

子字符串匹配选择器

选择器	示例	描述
[attr^=value]	li[class^=“box-”]	匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
[attr$=value]	li[class$=“-box”]	匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
[attr*=value]	li[class*=“box”]	匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。

1 .|[attr^=value] 匹配带有一个名为attr的属性的元素，其值开头为value子字符串。

<html>
    <head>
        <style type="text/css">
            [class^="first"] {background-color: #009966;}
        </style>
    </head>
    <body>
        <h2> [class^="first"]</h2>
        <p><a class="first">first</p>
        <p><a class="first second">first second</p>
        <p><a class="first-second">first-second</p>
        <p><a class="second first ">second first </p>
    </body>
</html>

在这里插入图片描述
2.[attr$=value] 匹配带有一个名为attr的属性的元素，其值结尾为value子字符串

<html>
    <head>
        <style type="text/css">
            [class$="first"] {background-color: #009966;}
        </style>
    </head>
    <body>
        <h2> [class$="first"]</h2>
        <p><a class="first">first</p>
        <p><a class="first second">first second</p>
        <p><a class="first-second">first-second</p>
        <p><a class="second first t">second first t</p>
        <p><a class="second first">second first</p>
    </body>
</html>

在这里插入图片描述
3. [attr=value] 匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。*

<html>
    <head>
        <style type="text/css">
            [class*="first"] {background-color: #009966;}
        </style>
    </head>
    <body>
        <h2> [class*="first"]</h2>
        <p><a class="first">first</p>
        <p><a class="first second">first second</p>
        <p><a class="second">second</p>
        <p><a class="second first first">second first first</p>
        <p><a class="second first">second first</p>
    </body>
</html>