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

Question

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

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

#blue4 { 
    background-color: red 
} 

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

Answer 1

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

только способ для сложного селектора иметь спецификацию идентификатора, если он содержит один или несколько идентификаторов. Ограничения реализации в сторону, теоретически невозможно переопределить даже один селектор 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, и вы получите псевдокласс, который в равной степени относится к селектору атрибутов, и, таким образом, все еще менее конкретный, чем идентификатор.