Il selettore di attributi CSS non funziona con un href

99

Ho bisogno di utilizzare il selettore di attributi in CSS per modificare il collegamento su colori e immagini diversi, 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é lo sfondo non è rosso?

html css css-selectors

— Igor Kraskynlykov
fonte

14

+1 perché non sapevo di un [attributo = 'AttributeName']

— SpaceBeers

7

@SpaceBeers, ecco element[attribute_name="attribute_value"].

— JMM

193

Usa $ dopo il tuo href. Questo farà sì che il valore dell'attributo corrisponda 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/

— Libro di Zeus
fonte

1

Valore dell'attributo in modo che corrisponda alla fine della stringa. suona come un bonus !!

— Jack

6

Questa risposta ha spiegazioni migliori dei selettori rispetto a w3schools.

— Jeff

1

La risposta accettata (utilizzando a[href$='.pdf']) presuppone che un collegamento a un pdf finirà sempre con .pdf. Questo non è necessariamente il caso, poiché il collegamento potrebbe avere una stringa di query o un frammento hash, ad esempio con un codice di monitoraggio UTM o un numero di pagina, nel qual caso tali collegamenti non verrebbero abbinati. In effetti, a seconda dell'applicazione, questo potrebbe essere il caso della maggior parte dei collegamenti.

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

Se vuoi assicurarti che la tua regola venga applicata anche in quei casi, potresti trovare una corrispondenza in .pdfqualsiasi punto dell'attributo utilizzando

a[href*='.pdf']

Tuttavia, ciò corrisponderà ad alcune cose improbabili ma non intenzionali, come un sottodominio our.pdf.domain.com/a-page. Ma possiamo restringerlo ulteriormente, poiché sappiamo che lo useremo solo per corrispondere ai PDF che hanno una stringa di query o un frammento di hash. Se combiniamo i 3 casi dovremmo abbinare tutti i link pdf.

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

— inwerpsel
fonte