Il selettore degli attributi CSS non funziona a href

Question

Ho bisogno di usare il selettore di attributo in css per cambiare link su diversi colori e immagini, ma non funziona.

ho questo html:

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

E questo css:

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

Perché non è il fondo rosso?

Answer 1

Usa $ dopo il tuo href. Questo renderà il valore dell'attributo uguale alla fine della stringa.

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) 

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