Атрибут атрибута CSS, содержащий частичное совпадение

Question

Используя следующий CSS, почему я не могу настроить таргетинг на 3 следующих тега привязки?

a[href~="checkout"] { /* Do something. */ } 

<a href="http://shop.mydomain.com/checkout/onepage/"> 
<a href="https://shop.mydomain.com/checkout/onepage/"> 
<a href="https://shop.mydomain.com/checkout/onepage/?___SID=S"> 

Что я делаю неправильно в своем селекторе CSS? Я пытаюсь выбрать частичное совпадение, используя ~ = для всех URL-адресов, содержащих слово «checkout».

Answer 1

Попробуйте

a[href*="checkout"] { /* Do something. */ } 

Вы должны использовать *, что означает содержат - см reference.

Кроме того, не забудьте закрыть якорные теги

</a> 

Работа JSFiddle

Answer 2

a[href~="checkout"] 

Удачные элементы, где в разделенных пробелами список слов, один из них точно «оформить заказ».

См W3C Документы для Селекторов Уровень 3:

[медса ~ = Val]

Представляет элемент с ATT атрибутом, значение которого пробелами список разделенных слов, один из которых точно «val». Если «val» содержит пробелы, он никогда не будет представлять ничего (поскольку слова разделены пробелами). Также, если «val» - это пустая строка, никогда ничего не представит.

Источник: http://www.w3.org/TR/css3-selectors/#attribute-selectors

Если вы хотите, чтобы соответствовать всем элементам, где атрсодержитстроку используйте

[attr*=string]