P粉5233350262023-08-24 00:41:41
good question.
I'm not sure - all the articles I've found avoid examples of multiple classes, such as here - but I'm assuming that when it comes to comparison specificity between class selectors and IDs, the class will only be evaluated to a value of 15
, no matter how detailed it is.
This is consistent with my experience with specific sexual behaviors.
However, musthave some stacking of classes because
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o
Compare
.o
To be more specific, my only explanation is that the specificity of stacked classes is only calculated against each other, not against the ID.
UPDATE: I kind of understand now. This is not a points system and the information about class weights being 15 points is incorrect. This is a very well explained 4 part numbering system which can be found here.
The starting point is 4 numbers:
style id class element 0, 0, 0, 0
According to W3C’s explanation of specificity, the specificity value of the above rules is:
#a 0,1,0,0 = 100 classes 0,0,15,0 = ...请参见评论
This is a numbering system with a very large (undefined?) base.
My understanding is that since the base is very large, any number in column 4 cannot beat the number greater than 0 in column 3, the same is true for column 2, and the same is true for column 1.... This understanding is correct ?
I was wondering if anyone with a better understanding of math could explain this numbering system and how to convert it to decimal when the individual elements are greater than 9.
P粉9208354232023-08-24 00:06:43
Pekka's answer is actually correct and probably the best way to think about this question.
However, as many have already pointed out, the W3C CSS Recommendation states: "Concatenating the three numbers a-b-c (in a large-base number system) gives specificity." So the geek in me You must figure out how big this base is.
It turns out that the "very large base" (by at least the 4 most commonly used browsers*) that implements this standard algorithm is 256 or 28.
This means that a style specified with 0 ids and 256 class names will override a style specified with only 1 id. I tested it with some fiddles:
...but, unfortunately 256 ids are not enough to cover 1 inline style (updated on 2012/8/15 -- you will need to use !important
)
Therefore, there is actually a "point system", but it is not based on base 10, but on base 256. Here's how it works:
(28)2 or 65536, multiplied by the number of ids in the selector
This is not very practical for simple concept communication.
This is probably why articles on this topic have always used base-10 based systems.
***** [Opera uses 216 (see karlcow's comment). Some other selector engines use infinity - there is actually no point system (see Simon Sapin's comment). ]
Updated, July 2014:
As Blazemonger pointed out earlier this year, webkit browsers (Chrome, Safari) now appear to use a higher base than 256. Maybe 216, like Opera? IE and Firefox still use 256.
Updated, March 2021:
Firefox no longer uses 256 as a base.