Какие из этих CSS-селекторов «отменяют» друг друга?

Question

Я нашел отличный пример Отображение сигналов гиперссылки с помощью CSS . Но в CSS примера есть три отдельных стиля, которые в моей голове должны делать в основном одно и то же. Или, по крайней мере, я не должен был бы использовать их все по моему мнению. Но я не уверен, что получу их все. Вот они:

/* all A tags whose REL attribute equals pdf */
a[rel='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

/*  all A tags whose REL attributes has the letters pdf somewhere mixed in*/
a[rel*='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

/* all A tags whose REL attribute contains the value pdf, seperated from other values with a space */
a[rel~='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

Я думаю, что смогу заменить первые два на последний, но опять же, я не уверен на 100%, что понимаю, как это работает. Кто-нибудь хочет пролить свет на это?

Мой вопрос конкретно такой: могу ли я пропустить один или два из них и при этом получить одинаковый результат для всех моих ссылок?

Answer 1

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

Но зачем вам эти три? Если первое должно работать, то придерживайтесь этого. Если этот не поддерживается, другие точно не будут поддерживаться.

Answer 2

Я бы почти сделал диаграммы Венна об этом ...

Все rel='pdf' отменены rel~='pdf'

Все rel~='pdf' отменены rel*='pdf'

Например:

• [rel*='pdf'] будет стиль rel="pdfdoc", а [rel~='pdf'] и [rel*='pdf'] не будет
• Оба [rel*='pdf'] и [rel~='pdf'] будут стиль rel="pdf doc", а [rel='pdf'] не будет
• Все селекторы будут стиля rel="pdf"

Не все браузеры могут обрабатывать эти селекторы CSS3, я думаю, именно поэтому был добавлен rel='pdf'. Вы можете удалить rel*='pdf', если не хотите стилизовать ссылки, содержащие pdf в атрибуте rel.

Answer 3

Этот охватывает все варианты использования:

/*  all A tags whose REL attributes has the letters pdf somewhere mixed in*/
a[rel*='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

Так как он соответствует pdf в любом месте текста.