Die CSS-Attributauswahl funktioniert nicht mit einem href

Ich muss die Attributauswahl in CSS verwenden, um den Link für verschiedene Farben und Bilder zu ändern, aber es funktioniert nicht.

Ich habe dieses HTML:

<a href="/manual.pdf">A PDF File</a>

Und diese CSS:

a {
     display: block;
     height: 25px;
     padding-left: 25px;
     color:#333;
     font: bold 15px Tahoma;
     text-decoration: none;
 }
 a[href='.pdf'] { background: red; }

Warum ist der Hintergrund nicht rot?

Verwenden Sie das $ nach Ihrem href. Dadurch wird der Attributwert an das Ende der Zeichenfolge angepasst.

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)

Quelle: http://www.w3.org/TR/selectors/

Die akzeptierte Antwort (mit a[href$='.pdf']) setzt voraus, dass ein Link zu einem PDF immer mit endet .pdf. Dies ist nicht unbedingt der Fall, da der Link eine Abfragezeichenfolge oder ein Hash-Fragment haben könnte, beispielsweise mit einem UTM-Tracking-Code oder einer Seitenzahl. In diesem Fall würden diese Links nicht übereinstimmen. Abhängig von Ihrer Anwendung kann dies bei den meisten Links der Fall sein.

<a href="/manual.pdf?utm_source=homepage">A PDF File</a>
<a href="/manual.pdf#page=42">A PDF File</a>

Wenn Sie sicherstellen möchten, dass Ihre Regel auch in diesen Fällen angewendet wird, können Sie eine .pdfbeliebige Stelle im Attribut verwenden

a[href*='.pdf']

Dies entspricht dann jedoch einigen unwahrscheinlichen, aber unbeabsichtigten Dingen, wie z. B. einer Subdomain our.pdf.domain.com/a-page. Wir können es jedoch weiter eingrenzen, da wir wissen, dass wir es nur für pdfs verwenden würden, die eine Abfragezeichenfolge oder ein Hash-Fragment enthalten. Wenn wir die 3 Fälle kombinieren, sollten wir alle PDF-Links abgleichen.

a[href$='.pdf'], a[href*='.pdf?'], a[href*='.pdf#'] {
    background: red;
}