Какой CSS-селектор сильнее?

Question

Какой селектор сильнее?

#nav li.current 

или

div #nav li 

и второй

a.test 

или

.test .test 

Каков ответ?

Answer 1

От spec:

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

• подсчитать количество ID селекторов в селекторе (= а)
• подсчитать количество селекторов класса , селекторов атрибутов и псевдоклассов в селекторе (= b)
• подсчитывает количество селекторов и псевдоэлементов типа в селекторе (= c)
• игнорировать универсальный селектор

селекторов внутри отрицания псевдо-класса подсчитывают как и любой другой, но само отрицание не считается псевдо-класса.

Сочетание трех чисел a-b-c (в системе с большим основанием) дает специфику.

Примеры:

*    /* a=0 b=0 c=0 -> specificity = 0 */ 
LI    /* a=0 b=0 c=1 -> specificity = 1 */ 
UL LI   /* a=0 b=0 c=2 -> specificity = 2 */ 
UL OL+LI  /* a=0 b=0 c=3 -> specificity = 3 */ 
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ 
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ 
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ 
#x34y   /* a=1 b=0 c=0 -> specificity = 100 */ 
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */ 

Answer 2

Вы можете следовать следующим правилам для расчета селекторы точек.

Селектор тегов стоит 1 балл.

Селектор классов стоит 10 баллов.

Селектор ID стоит 100 баллов.

Встраиваемый стиль стоит 1000 баллов.

#nav li.current = 100 + 1 + 10 = 111

div #nav li = 1 + 100 + 1 = 102

a.test = 1 + 10 = 11

.test .test = 10 + 10 = 20