CSS属性select器不工作一个href

我需要在CSS中使用属性select器来改变不同的颜色和图像的链接，但它不起作用。

我有这个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; } 

为什么不是背景红色？

Answer 1

在你的href之后使用$。 这将使属性值匹配string的末尾。

 a[href$='.pdf'] { /*css*/ } 

JSFiddle： http : //jsfiddle.net/UG9ud/

 E[foo] an E element with a "foo" attribute (CSS 2) E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" (CSS 2) E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" (CSS 2) E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" (CSS 3) E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" (CSS 3) E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" (CSS 3) E[foo|="en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" (CSS 2) 

来源： http ： //www.w3.org/TR/selectors/