Навіщо використовувати селектор атрибутів для збігу класів?

Я знайшов приклад адаптивних шаблонів електронної пошти, де є такі селектори CSS, такі як такі:

a[class="btn"]

Чому використовується цей синтаксис, якщо він абсолютно такий самий, як:

a.btn

Чи це впливає на мобільні браузери чи щось інше?

css css-selectors

— дюцин
джерело

@Jevgeni Bogatyrjov: Це зовсім інше питання, яке навіть не пов'язане з CSS, але я бачу, як це могло заплутати через неправильний заголовок. Я його відредагував.

— BoltClock

142

[]Синтаксис є селектор атрибуту .

a[class="btn"]

Буде вибрано будь-який <a>тег з class="btn". Однак він не вибере, <a>що має class="btn btn_red", наприклад (тоді як a.btnби). Він лише точно відповідає цьому атрибуту.

Можливо, ви захочете прочитати 30 селекторів CSS, які потрібно запам’ятати . Це неоціненно для будь-якого майбутнього веб-розробника.

— Ерік
джерело

але він не має нічого спільного з реагуванням, це чистий синтаксис CSS, так?

— ducin 24.03.13

@tkoomzaaskz Правильно.

— Ерік

Я також натрапив на той самий підручник ( campaignmonitor.com/guides/mobile/coding ) - здається дивним, що вони використали б цей прийом у підручнику. Підручники повинні робити речі максимально зрозумілими для тих, хто починає. Особливо, коли загального .btnселектора було б достатньо. Мені чогось не вистачає? Чи є якась користь від цього? Більшу конкретність я здогадуюсь?

— nickspiel

чи не є новий спосіб вибрати усі імена класів за допомогою jQuery та дужок, щоб отримати всі класи з однаковим префіксом? Щось на зразок $ (this) .css ("[class ~ = 'btn_']", "red"); Синтаксис може бути помилковим, але чи знаєте ви, який правильний синтаксис?

— whyoz

Було б чудово, якби ви оновили свою відповідь, щоб показати й інші типи селекторів атрибутів. Пошук за "квадратними дужками селектора css" піднімає це питання під час пошуку, і важко шукати інші варіанти ("css селектор квадратних дужок зірка").

— cimmanon