我需要在CSS中使用属性选择器来更改不同颜色和图像的链接,但它不起作用。
我有这个html:
<a href="/manual.pdf">A PDF File</a>
字符串
这个CSS:
a {
display: block;
height: 25px;
padding-left: 25px;
color:#333;
font: bold 15px Tahoma;
text-decoration: none;
}
a[href='.pdf'] { background: red; }
型
为什么背景不是红色的?
3条答案
按热度按时间yqkkidmi1#
在href后面使用$。这将使属性值与字符串的结尾匹配。
字符串
JSFiddle:http://jsfiddle.net/UG9ud/
型
来源:http://www.w3.org/TR/selectors/
8qgya5xd2#
可接受的答案(使用
a[href$='.pdf']
)假设指向pdf的链接总是以.pdf
结尾。这不一定是这种情况,因为链接可以具有查询字符串或散列片段,例如具有UTM跟踪代码或页码,在这种情况下,这些链接将不匹配。事实上,根据您的应用程序,这可能是大多数链接的情况。字符串
如果您想确保您的规则也适用于这些情况,您可以在属性中的任何位置匹配
.pdf
型
然而,这将匹配一些不太可能但意想不到的东西,例如子域
our.pdf.domain.com/a-page
。但是我们可以进一步缩小它的范围,因为我们知道我们只会使用它来匹配具有查询字符串或散列片段的PDF。如果我们合并这3种情况,我们应该匹配所有的PDF链接。型
qnzebej03#
这个也应该工作:
a[href*='.pdf'] { background:red; }