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

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

  • 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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

Ответ 2

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

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