web-dev-qa-db-fra.com

Le sélecteur d'attribut CSS ne fonctionne pas avec un href

J'ai besoin d'utiliser le sélecteur d'attributs en CSS pour changer le lien sur différentes couleurs et images, mais cela ne fonctionne pas.

J'ai ce html:

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

Et ce css:

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

Pourquoi le fond n'est-il pas rouge?

htmlcsscss3css-selectors
95
Igor Kraskynlykov

Utilisez le $ après votre href. Cela fera que la valeur de l'attribut correspondra à la fin de la chaîne.

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)

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

179
Book Of Zeus