0017.jpg
使用属性选择器可以筛选出设定了特定属性的标签。例如选取所有设定了title属性的<img>标签：
img[title]
这种选择符的第一部分是标签名（img），随后是属性名，放在方括号里：[title] 。
CSS不限制属性选择符只能使用标签名，也可以使用类。例如：
.photo[title]
用于选取类为photo，而且设置了title属性的全部元素。
属性选择符不仅可以选取设定了某个属性的元素，还可以更进一步，选取属性值为指定值的元素。比如我们想突出显示指向某个URL的链接：
a[href="https://www.jianshu.com/c/1681745eb504"] {
color: orange;
font-weight: bold;
}
又例如需要选取表单中的文本框
input[type="text"] {
color: #fff;
background: #aaa;
}
以下是属性选择符的其他用法
[attribute~=value]
选取含有attribute的属性，且attribute属性的值是以空格隔开的系列值，其中某个值为value的指定元素。
或者选取含有attribute的属性，且attribute属性只有一个value值的元素。
[attribute~=value]是[attribute=value] 的加强版。
HTML代码
<p class="first test">我的简书ID：KelvinZ</p>
<p class="second">这是第二个P元素</p>
<p class="test">第三个P元素</p>
<div class="test">这是一个div元素</div>
CSS代码
p[class~="test"] {
background: pink;
}
image.png
[attribute|=value]
选取含有attribute的属性，且attribute属性的值是以连字符分隔的系列值，其中第一个值为value的指定元素。
HTML代码
<p class="test-one">我的简书ID：KelvinZ</p>
<p class="second-test">这是第二个P元素</p>
<p class="test">第三个P元素</p>
<div class="test">这是一个div元素</div>
CSS代码
p[class|="test"] {
background: pink;
}
image.png
[attribute^=value]
选取含有attribute的属性，且attribute属性的值是以value开头的指定元素。
HTML代码
<p class="test-one">我的简书ID：KelvinZ</p>
<p class="test-two">这是第二个P元素</p>
<p class="test">第三个P元素</p>
<div class="test">这是一个div元素</div>
CSS代码
p[class^="test"] {
background: pink;
}
image.png
[attribute$=value]
选取含有attribute的属性，且attribute属性的值是以value结尾的指定元素。
HTML代码
<p class="test-one">我的简书ID：KelvinZ</p>
<p class="test-two">这是第二个P元素</p>
<p class="test">第三个P元素</p>
<div class="test">这是一个div元素</div>
CSS代码
p[class$="two"] {
background: pink;
}
image.png
[attribute=value]*
选取含有attribute的属性，且attribute属性的值含有value的指定元素。
HTML代码
<p class="test-one">我的简书ID：KelvinZ</p>
<p class="test-two">这是第二个P元素</p>
<p class="test">第三个P元素</p>
<div class="test">这是一个div元素</div>
CSS代码
p[class*="o"] {
background: pink;
}
image.png
其中[attribute^=value]、[attribute$=value]和[attribute*=value]是CSS 3.0新增的选择符。
上面的选择符匹配规则越严格优先级越高。
例如：img[title="Rabbit"] 选择符定义的CSS样式会覆盖 img[title] 中相同定义的CSS样式。
最后是我常用的属性选择符的地方。
比如我要把站外的链接用不同颜色的字体突出显示。
a[href^="http://"]
要调整PDF文件padding：
a[href$=".pdf"]
HTML与CSS 目录：HTML与CSS
上一篇：【CSS选择符】伪类和伪元素
下一篇：【CSS选择符】子代选择符
网友评论