Является ли селектор атрибута для атрибута идентификатора менее конкретным, чем селектор идентификатора?

Question

Что мне нужно сделать, чтобы дать [id^=value] селектор той же специфичности, что и обычный идентификатор, и почему он уже не равен или больше? (учитывая, что я это дал html также)

html div[id^="blue"] {
    background-color: blue
}

#blue4 {
    background-color: red
}

jsfiddle: http://jsfiddle.net/bjwe6yr0/1/

Answer 1

Селектор атрибута всегда будет менее конкретным, чем селектор идентификатора; его значение специфичности не изменяется в зависимости от имени атрибута. Селекторы отображают только определенные имена атрибутов на селекторы классов и селекторы ID; Селектор атрибута является общей концепцией и не содержит таких отображений.

Единственный способ для сложного селектора иметь специфичность идентификатора, если он содержит один или несколько селекторов идентификатора. Помимо ограничений реализации, теоретически невозможно переопределить даже один селектор идентификатора с любым количеством селекторов атрибутов или любого другого типа простого селектора.

Вот как ваши два селектора сравниваются:

/* 1 attribute, 2 types -> specificity = 0-1-2 */
html div[id^="blue"] {
    background-color: blue
}

/* 1 ID                 -> specificity = 1-0-0 */
#blue4 {
    background-color: red
}

Даже добавление html не помогает, потому что это просто селектор типа. Измените это на :root и вы получите псевдокласс, который одинаково специфичен для селектора атрибута и, следовательно, еще менее специфичен, чем идентификатор.

Answer 2

Вы можете рассмотреть not() селектор для добавления случайного идентификатора, и тогда вы будете иметь более высокую или ту же специфику, поскольку специфика not() равен специфике селектора внутри него:

html body div[id^="blue"]:not(#randomID) {
  background-color: blue
}

#blue4 {
  background-color: red
}

div {
  height: 50px;
  width: 50px
}

<div id="blue1"></div>
<div id="blue2"></div>
<div id="blue3"></div>
<div id="blue4"></div>