Селектор атрибутов 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

Ответы:

194

Используйте $ после вашего 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. Но мы можем сузить его еще больше, так как мы знаем, что будем использовать его только для сопоставления PDF-файлов, которые имеют строку запроса или хеш-фрагмент. Если мы объединим 3 случая, мы должны сопоставить все ссылки в формате PDF.

a[href$='.pdf'], a[href*='.pdf?'], a[href*='.pdf#'] {
    background: red;
}
Inwerpsel
источник