Html CSS 属性选择器在 href 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8850173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS attribute selector does not work a href
提问by Igor Kraskynlykov
I need to use attribute selector in css to change link on different color and image, but it does not work.
我需要在 css 中使用属性选择器来更改不同颜色和图像上的链接，但它不起作用。
I have this html:
我有这个 html：
<a href="/manual.pdf">A PDF File</a>
And this css:
而这个CSS：
a {
display: block;
height: 25px;
padding-left: 25px;
color:#333;
font: bold 15px Tahoma;
text-decoration: none;
}
a[href='.pdf'] { background: red; }
Why isn't the background red?
为什么背景不是红色？
回答by Book Of Zeus
Use the $ after your href. This will make the attribute value to match the end of the string.
在您的 href 后使用 $。这将使属性值匹配字符串的末尾。
a[href$='.pdf'] { /*css*/ }
JSFiddle: http://jsfiddle.net/UG9ud/
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)
source: http://www.w3.org/TR/selectors/
回答by inwerpsel
The accepted answer (using a[href$='.pdf']) assumes that that a link to a pdf will always end with .pdf. That is not necessarily the case, as the link could have a query string or a hash fragment, for example with a UTM tracking code or a page number, in which case those links would not be matched. In fact depending on your application this could be the case for most links.
接受的答案（使用a[href$='.pdf']）假定指向 pdf 的链接将始终以.pdf. 情况并非一定如此，因为链接可能具有查询字符串或哈希片段，例如带有 UTM 跟踪代码或页码，在这种情况下，这些链接将无法匹配。事实上，根据您的应用程序，大多数链接都可能是这种情况。
<a href="/manual.pdf?utm_source=homepage">A PDF File</a>
<a href="/manual.pdf#page=42">A PDF File</a>
If you want to ensure your rule is also applied in those cases you could match .pdfanywhere in the attribute using
如果您想确保您的规则也适用于这些情况，您可以使用匹配.pdf属性中的任何位置
a[href*='.pdf']
However this will then match some unlikely but unintended things, such as a subdomain our.pdf.domain.com/a-page. But we can narrow it down further, as we know we would only use it match pdfs that have a query string or hash fragment. If we combine the 3 cases we should match all pdf links.
但是，这将匹配一些不太可能但意想不到的东西，例如 subdomain our.pdf.domain.com/a-page。但是我们可以进一步缩小范围，因为我们知道我们只会使用它来匹配具有查询字符串或哈希片段的 pdf。如果我们结合这 3 种情况，我们应该匹配所有 pdf 链接。
a[href$='.pdf'], a[href*='.pdf?'], a[href*='.pdf#'] {
background: red;
}
