Вопрос: В чем специфика селектора атрибутов?


Мне интересно, какова специфика селектора атрибутов. Например:

  • Id = 100 баллов
  • Класс = 10 баллов
  • Html Tag = 1 балл

Пример:

/* this specificity value is 100 + 10 + 1 = 111 */
#hello .class h2 { }

С помощью этого HTML:

<div class="selectform">
<input type="text" value="inter text">
<input type="text" value="inter text" class="inputag">
</div>

Какой из этих 2 селекторов более конкретный?

.selectform input[type="text"] { }
.selectform .inputbg { }

Проверьте демоверсию   http://tinkerbin.com/IaZW8jbI


16


источник


Ответы:


Селекторы атрибутов одинаково специфичны для селекторов классов.

В вашем примере первый селектор более конкретный, поскольку есть дополнительный селектор типов input что заставляет его бить второй селектор.

Специфика каждого селектора вычисленный  следующим образом:

/* 1 class, 1 attribute, 1 type -> specificity = 0-2-1 */
.selectform input[type="text"] { }

/* 2 classes                    -> specificity = 0-2-0 */
.selectform .inputbg { }

17



В общем, все типы селекторов одинаковы; имеет значение количество селекторов в выражении. Таким образом, ID = 1, class = 1 и HTML tag = 1.

В случае, если два селектора имеют одинаковую специфичность, тот, который далее находится в файле CSS, «выигрывает». Поэтому убедитесь, что вы заказываете ссылки на CSS от общего к конкретному; библиотеки, такие как jquery-ui.css, идут сначала, а ваши файлы CSS идут за ними.


2