How are the points in CSS specificity calculated

后端 未结 7 1650
萌比男神i
萌比男神i 2020-11-21 05:18

Researching specificity I stumbled upon this blog - http://www.htmldog.com/guides/cssadvanced/specificity/

It states that specificity is a point-scoring system for

7条回答
  •  挽巷
    挽巷 (楼主)
    2020-11-21 06:07

    Good question.

    I can't tell for sure - all the articles I manage to find avoid the example of multiple classes, e.g. here - but I assume that when it comes to comparing the specifity between a class selector and an ID, the class gets calculated with a value of 15 only, no matter how detailed it is.

    That matches my experience in how specificity behaves.

    However, there must be some stacking of classes because

    .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o
    

    is more specific than

    .o
    

    the only explanation I have is that the specificity of stacked classes is calculated only against each other but not against IDs.

    Update: I half-way get it now. It is not a points system, and the information about classes weighing 15 points is incorrect. It is a 4-part numbering system very well explained here.

    The starting point is 4 figures:

    style  id   class element
    0,     0,   0,    0
    

    According to the W3C explanation on specificity, the specificty values for the abovementioned rules are:

    #a            0,1,0,0    = 100
    classes       0,0,15,0   = ... see the comments
    

    this is a numbering system with a very large (undefined?) base.

    My understanding is that because the base is very large, no number in column 4 can beat a number > 0 in column 3, the same for column 2, column 1 .... Is this correct?

    I'd be interested whether somebody with a better grasp at Math than me could explain th numbering system and how to convert it to decimal when the individual elements are larger than 9.

提交回复
热议问题