CSS属性选择器
Posted 厦门德仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于CSS属性选择器的主要内容，如果未能解决你的问题，请参考以下文章