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

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

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

Пример:

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

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

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

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

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

2 ответа

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

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

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

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


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

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

licensed under cc by-sa 3.0 with attribution.