Selektor atrybutu CSS nie działa z atrybutem href

99

Muszę użyć selektora atrybutów w css, aby zmienić link na inny kolor i obraz, ale to nie działa.

Mam ten html:

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

A ten css:

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

Dlaczego tło nie jest czerwone?

html css css-selectors

— Igor Kraskynlykov
źródło

14

+1, ponieważ nie wiedziałem o [attribute = 'AttributeName']

— SpaceBeers

7

@SpaceBeers, to jest element[attribute_name="attribute_value"].

— JMM

193

Użyj znaku $ po href. Spowoduje to, że wartość atrybutu będzie zgodna z końcem ciągu.

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)

źródło: http://www.w3.org/TR/selectors/

— Księga Zeusa
źródło

1

Wartość atrybutu pasująca do końca ciągu. brzmi jak bonus !!

— Jack

6

Ta odpowiedź ma lepsze wyjaśnienie selektorów niż w3schools.

— Jeff,

1

Przyjęta odpowiedź (za pomocą a[href$='.pdf']) zakłada, że link do pliku PDF zawsze będzie kończył się na .pdf. Niekoniecznie tak jest, ponieważ link może zawierać ciąg zapytania lub fragment z krzyżykiem, na przykład z kodem śledzenia UTM lub numerem strony, w którym to przypadku te linki nie zostaną dopasowane. W rzeczywistości, w zależności od aplikacji, może tak być w przypadku większości linków.

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

Jeśli chcesz mieć pewność, że reguła jest również stosowana w takich przypadkach, możesz dopasować .pdfdowolne miejsce w atrybucie za pomocą

a[href*='.pdf']

Jednak będzie to pasowało do niektórych mało prawdopodobnych, ale niezamierzonych rzeczy, takich jak subdomena our.pdf.domain.com/a-page. Ale możemy to jeszcze bardziej zawęzić, ponieważ wiemy, że użylibyśmy go tylko do plików PDF, które mają ciąg zapytania lub fragment z krzyżykiem. Jeśli połączymy te 3 przypadki, powinniśmy dopasować wszystkie linki pdf.

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

— inwerpsel
źródło