[type = "application / pdf"] против a [href $ = ". pdf"]

Question

В чем разница между этими 2 селекторами a[type="application/pdf"] и a[href$=".pdf"]

a[type="application/pdf"] { 
  background-image: url(/images/pdf.gif);
  padding-left: 20px;
}

a[href$=".pdf"] { 
  background-image: url(/images/pdf.gif);
  padding-left: 20px;
}

Answer 1

Принятый ответ не совсем правильный. Ни один из селекторов не выполняет "Подбор типов MIME".

a[type="application/pdf"] будет соответствовать всем ссылкам, для которых атрибут «type» установлен в «application / pdf». Если вы хотите отобразить значок PDF, вам нужно добавить type="application/pdf" ко всем подходящим ссылкам.

Это именно то, для чего предназначен атрибут type в ссылках (см. спецификация ), чтобы предоставить «подсказку» типу MIME. Тем не менее, браузер на самом деле не знает, какой тип файла, пока не начнет загружать его. Просто хотел это прояснить.

Другой селектор, a[href$=".pdf"], соответствует только URL-адресу ссылки. Он будет соответствовать любым ссылкам, которые заканчиваются на .pdf, независимо от того, являются ли они файлами PDF или нет. И, конечно, он не будет соответствовать URL-адресам, таким как file.pdf?v=2.

Лучше всего пометить все ссылки на файлы PDF вручную, либо с атрибутом type, либо, поскольку вы хотите совместимость с IE, просто обычный класс.

Answer 2

Один выполняет сопоставление типов MIME, а другой - глобализацию расширений. Вероятно, вам следует использовать первый, потому что не все используют расширения файлов.