Селектор атрибутів CSS не працює href

99

Мені потрібно використовувати селектор атрибутів у css, щоб змінити посилання на інший колір та зображення, але це не працює.

У мене є цей html:

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

І це css:

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

Чому фон не червоний?

html css css-selectors

— Ігор Краскінликов
джерело

14

+1, тому що я не знав про [attribute = 'AttributeName']

— SpaceBeers

7

@SpaceBeers, це element[attribute_name="attribute_value"].

— JMM

193

Використовуйте $ після свого href. Це зробить значення атрибута відповідним кінці рядка.

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)

джерело: http://www.w3.org/TR/selectors/

— Книга Зевса
джерело

1

Значення атрибута, щоб відповідати кінці рядка. звучить як бонус !!

— Джек

6

Ця відповідь має кращі пояснення селекторів, ніж w3schools.

— Джефф

1

Прийнята відповідь (використовуючи a[href$='.pdf']) передбачає, що посилання на pdf завжди закінчуватиметься .pdf. Це не обов'язково так, оскільки посилання може мати рядок запиту або хеш-фрагмент, наприклад, з кодом відстеження UTM або номером сторінки, і в цьому випадку ці посилання не збігаються. Насправді залежно від вашої заявки це може стосуватися більшості посилань.

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

Якщо ви хочете переконатися, що ваше правило також застосовується в тих випадках, ви можете відповідати .pdfбудь-де в атрибуті

a[href*='.pdf']

Однак це буде відповідати деяким малоймовірним, але ненавмисним речам, таким як субдомен our.pdf.domain.com/a-page. Але ми можемо звузити його далі, оскільки ми знаємо, що ми будемо використовувати лише його відповідність файлам pdfs, у яких є рядок запиту або хеш-фрагмент. Якщо ми поєднаємо 3 випадки, ми повинні відповідати всім посиланням у форматі PDF.

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

— inwerpsel
джерело