Как я могу выбрать ссылки, которые ведут к URL, заканчивающимся на "/ foo-bar"?

Question

Я хочу стилизовать некоторые теги в SE с помощью пользовательских цветов на основе их тегов, используя только CSS.

Это не должно быть слишком сложно, для:

<a href="/questions/tagged/foo-bar" class="post-tag" title="" rel="tag">foo-bar</a>

... должно легко совпадать с селектором, таким как:

a.post-tag[href$=/foo-bar]

..., где косая черта должна соответствовать foo-bar , но не baz-foo-bar.

Однако не все так просто.Кажется, что и черта, и косая черта мешают работе селектора.К счастью, я могу обойти это путем экранирования символов, поэтому / становится \5c и - становится \2d.

Это, похоже, тоже ничего не соответствует:

a.post-tag[href$=\5cfoo\2dbar]

... тогда как a.post-tag[href$=foo\2dbar] имеет некоторые совпадения, но опять же их слишком много.

Как выбрать ссылкузаканчивается в "/ foo-bar" с использованием CSS?

Answer 1

Просто заключите значение в селекторе атрибута в кавычки, чтобы вам не пришлось ничего экранировать, например, как вы цитируете значения атрибута в HTML:

a.post-tag[href$="/foo-bar"]

jsFiddle Предварительный просмотр