Зачем использовать селектор атрибутов для сопоставления классов?

85

Я нашел пример адаптивных шаблонов электронной почты, в которых есть такие CSS-селекторы, как следующие:

a[class="btn"]

Почему используется этот синтаксис, если он полностью совпадает с:

a.btn

Влияет ли это на мобильные браузеры или что-то еще?

css css-selectors Ducin
источник
5
@Jevgeni Bogatyrjov: Это совершенно другой вопрос, даже не связанный с CSS, но я вижу, как это могло сбивать с толку из-за неправильного заголовка. Я его отредактировал.
BoltClock

Ответы:

142

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

a[class="btn"]

Это выберет любой <a>тег с class="btn". Однако он не будет выбирать , например, <a>что имеет class="btn btn_red"(а a.btnбыло бы). Он только точно соответствует этому атрибуту.

Вы можете прочитать 30 CSS-селекторов, которые вы должны запомнить . Это бесценно для любого начинающего веб-разработчика.

Эрик
источник
но он не имеет ничего общего с отзывчивостью, это чистый синтаксис CSS, верно?
ducin
2
@tkoomzaaskz Правильно.
Эрик
Я также наткнулся на тот же учебник ( campaignmonitor.com/guides/mobile/coding ) - кажется странным, что они использовали эту технику в учебнике. Учебники должны делать вещи максимально понятными для начинающих. Особенно, когда .btnхватило бы обычного селектора. Я что-то упускаю? Есть ли в этом польза? Полагаю, больше конкретики?
nickspiel
нет ли нового способа выбрать все имена классов с помощью jQuery и скобок, чтобы получить все классы с одинаковым префиксом? Что-то вроде $ (this) .css ("[class ~ = 'btn_']", "red"); Синтаксис может быть неправильным, но знаете ли вы, какой синтаксис правильный?
whyoz
1
Было бы здорово, если бы вы обновили свой ответ, чтобы показать и другие типы селекторов атрибутов. Поиск по запросу «квадратные скобки селектора CSS» вызывает этот вопрос при поиске, и трудно найти другие варианты («звездочка квадратных скобок селектора CSS»).
cimmanon