Die CSS-Attributauswahl funktioniert nicht mit einem href

99

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?

html css css-selectors

— Igor Kraskynlykov
quelle

14

+1, weil ich nichts über ein [attribute = 'AttributeName']

— wusste

7

@ SpaceBeers, das ist element[attribute_name="attribute_value"].

— JMM

193

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/

— Buch des Zeus
quelle

1

Attributwert, der dem Ende der Zeichenfolge entspricht. klingt nach einem Bonus !!

— Jack

6

Diese Antwort enthält bessere Erklärungen für die Selektoren als w3schools.

— Jeff

1

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;
}

— inwerpsel
quelle