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

Ответ 1

Из spec:

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

• подсчитать количество идентификаторов в селекторе (= a)
• подсчитать количество селекторов классов, селекторов атрибутов и псевдоклассов в селекторе (= 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 */

Ответ 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