属性选择器
CSS 属性选择器通过已经存在的属性名或属性值匹配元素。
有点结合正则表达式的样子
存否和值选择器
这些选择器允许基于一个元素自身是否存在(例如
href
)或者基于各式不同的按属性值的匹配,来选取元素。
选择器 | 示例 | 描述 |
---|---|---|
| | 匹配带有一个名为attr的属性的元素——方括号里的值。 |
| | 匹配带有一个名为attr的属性的元素,其值正为value——引号中的字符串。 |
| | 匹配带有一个名为attr的属性的元素 ,其值正为value,或者匹配带有一个attr属性的元素,其值有一个或者更多,至少有一个和value匹配。注意,在一列中的好几个值,是用空格隔开的。 |
| | 匹配带有一个名为attr的属性的元素,其值可正为value,或者开始为value,后面紧随着一个连字符。 |
下面的示例中,你可以看到这些选择器是怎样使用的。
- 使用
,我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。li[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(飘零雾雨), [email protected], 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>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5CNyczYwAzYkFTOycDMkJmZzETYlFzNmRjYhRDO1kDO48CXzIzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLzM3Lc9CX6MHc0RHaiojIsJye.png)
子字符串匹配选择器
这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如,如果你有
box-warning
和
box-error
类,想把开头为“box-”字符串的每个物件都匹配上的话,你可以用
[class^="box-"]
来把它们两个都选中。
| | 匹配带有一个名为attr的属性的元素,其值开头为value子字符串。 |
| | 匹配带有一个名为attr的属性的元素,其值结尾为value子字符串 |
| | 匹配带有一个名为attr的属性的元素,其值的字符串中的任何地方,至少出现了一次value子字符串。 |
下个示例展示了这些选择器的用法:
<meta charset="utf-8">
<title>CSS 目标伪类选择符 target选择器-CSS教程</title>
<meta name="author" content="Joy Du(飘零雾雨), [email protected], 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>
参考