CSS_4——属性选择器

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

有点结合正则表达式的样子

存否和值选择器

这些选择器允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。

选择器	示例	描述
[*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

下面的示例中，你可以看到这些选择器是怎样使用的。

• 使用li[class]，我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。
• li[class="a"]匹配带有一个a类的选择器，不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类，它选中了第二项。
• li[class~="a"]会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值，它选中了第二和第三项。

<meta charset="utf-8">
<title>CSS 目标伪类选择符 target选择器-CSS教程</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com">
<style>
li[class] {
    font-size: 200%;
}

li[class="a"] {
    background-color: yellow;
}

li[class~="a"] {
    color: red;
}
    

</style>

    <h1>Attribute presence and value selectors</h1>



    <ul>
        <li>Item 1</li>
        <li class="a">Item 2</li>
        <li class="a b">Item 3</li>
        <li class="ab">Item 4</li>
    </ul>
    

子字符串匹配选择器

这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有box-warning和box-error类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用[class^="box-"]来把它们两个都选中。

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

下个示例展示了这些选择器的用法：

li[class^="a"]匹配了任何值开头为a的属性，于是匹配了前两项。
li[class$="a"]匹配了任何值结尾为a的属性，于是匹配了第一和第三项。
li[class*="a"]匹配了任何值的字符串中出现了a的属性，于是匹配了所有项。

<meta charset="utf-8">
<title>CSS 目标伪类选择符 target选择器-CSS教程</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com">
<style>
    li[class^="a"] {
        font-size: 200%;
    }

    li[class$="a"] {
        background-color: yellow;
    }

    li[class*="a"] {
        color: red;
    }
        
    

</style>

<h1><header>test</header></h1>
    <section>
        <h1>Attribute substring matching selectors</h1>
    <ul>
        <li class="a">Item 1</li>
        <li class="ab">Item 2</li>
        <li class="bca">Item 3</li>
        <li class="bcabc">Item 4</li>
    </ul>
</section>

参考

属性选择器