Исправляем проблему с CSS selector a
Быстрый ответ
Если атрибутивный селектор a[href]
в CSS работает непредсказуемо, убедитесь, что совпадение селектора точно соответствует значению атрибута href
в вашем HTML-элементе ссылки.
a[href="exact-url"] { /* Воображайте, что ваш CSS – это волшебный посох волшебника */ }
Поиск по части значения расширяет возможности: ^=
(начинается с), $=
(заканчивается на) и *=
(содержит):
a[href^="https://"] { /* HTTPS означает безопасность, не так ли? */ }
a[href$=".pdf"] { /* Потому что серый цвет – это слишком пресно для PDF */ }
a[href*="site.com"] { /* Если бы мой начальник об этом знал... */ }
Только убедитесь, что какое-нибудь другое более уникальное правило не превзошло по влиянию ваше в CSS.
[AsideBanner]
Стилизация ссылок на PDF-файлы
Для выделения ссылок, ведущих к PDF-файлам, идеально подходит селектор $=
для поиска URL, которые заканчиваются на .pdf
:
a[href$='.pdf'] {
background-color: red; /* PDF-документы достойны особого внимания: фон красный как Марс! */
}
Работа с query-строками и якорями
Есть ли query-строки или якоря в URL? Воспользуйтесь следующими селекторами:
/* Отыскивает каждый href, где '.pdf' расположено перед '?' */
a[href*='.pdf?'] { /* стили */ }
/* Выбирает каждый href, где '.pdf' расположено перед '#' */
a[href*='.pdf#'] { /* стили */ }
Они могут объединиться в суперкоманду для более детальной стилизации:
a[href$='.pdf'], a[href*='.pdf?'], a[href*='.pdf#'] {
/* Они объединяются, чтобы раскрыть все секреты PDF-ссылок */
}
Внимание к синтаксису
Будьте внимательны к глюкам CSS-синтаксиса: одна неправильно поставленная кавычка или скобка может полностью ослабить ваш селектор.
Проверьте всё дважды. Убедитесь, что ссылка соответствует тегу <a>
с атрибутом href
, который указывает на PDF.
Визуализация
Ваш селектор CSS — это Ной, а атрибут href
— это Ковчег:
Ной (Селектор): a[href="https://example.com"]
Ковчег (Элемент): <a href="https://example.com">Ссылка</a>
🔑✅ Ной нашёл Ковчег, морской шторм выстоян!
Ной (Селектор): a[href="http://example.com"]
Ковчег (Элемент): <a href="https://example.com">Ссылка</a>
🔑❌ Ной не нашёл Ковчег, все надежды утонули!
Урок усвоен: Ною (атрибуту href
) требуется идеальный Ковчег (точно указанный в селекторе).
Использование других атрибутов
Вы можете внести изысканность в дизайн, комбинируя href
с другими атрибутами:
/* Приглашает на бал все 'скачиваемые' ссылки (*.pdf) */
a[href$=".pdf"][data-downloadable="yes"] { /* стили */ }
Правильная иерархия
Иногда проблема прячется не в атрибутивном селекторе, а в другом правиле, настаивающем на своём превосходстве:
#content a[href$=".pdf"] { /* Этот мускулистый селектор омрачает ваше представление! */ }
Эксперименты на JSFiddle
Попробуйте разные вариации ссылок на JSFiddle и узнайте, как ваши селекторы ведут себя на практике. Для отслеживания работы селекторов атрибутов PDF, посетите: Пример на JSFiddle.