Ask:
A:link/a:visited why is the priority higher than class?
View Example:/ http/jsbin.com/irifubu/1/
On Chrome (30.0.1599.69), IE 10,firefox 25.0
See the link is red (a:link) instead of yellow (. Test)
Want to ask, why? May I ask how the standard is explained? If possible, please list the Web site of the standard description.
Reference:
Assigning property values, cascading, and inheritance
Selectors Level 3
Answer:
This answer is known to the rotor, the author of the User: a Trace
The specification has been written very clearly:
calculate the class selector inside the selector, the attribute selector, the number of pseudo-class selectors (=b)
In the selectors Level 3 specification, the priority (weight) of a selector is calculated by A, B, and C three tokens in series,
where:
Number of ID selectors "such as: #header" (=a)
Class selector "such as:. foo", attribute selector "such as: [Class]", Pseudo-class "such as:: link" number (=B)
Tag Selector "such as: h1", pseudo-elements "such as:: after" number (=C)
Ignore "*" Selector
Although pseudo-classes (such as: hover) participate in the calculation of CSS precedence, ":not" does not participate in calculations.
The precedence within the HTML style attribute is described in CSS2.1 (it does not directly participate in the calculation of the priority in the browser implementation)
Assigning property values, cascading, and inheritance
As long as a selector of the a>0,b=0, even if another choice of a=0, b=161, then the former weight is still greater.
Example 1:
a:link{color:red;/* Priority: A=0,b=1,c=1 */}.test{color:yellow;/* Priority: A=0,b=1,c=0 */}
Their weights (priority) B are equal, but in the C tag, the former is greater than the latter, so the final "a:link" effect is shown in red.
Example 2:
Div[class].main a{color:red;/* Priority: a=0,b=2,c=2 */}body div a[href]{color:blue;/* Priority: A=0,b=1,c=3 */}
Since both the property selector and the class selector are computed in the B tag, the former b=2> the latter b=1 and eventually appears in red.
Remember, do not compare the size of a simple weight as a 10 binary number.
Exercises:
what color does the following code ultimately show, and what are the priority levels?
Extended reading:
KB005:CSS Cascade
WebKit and Firefox use a single int value type to replace the potential problem of CSS Selector ' s specificity segmented notation
Interesting: 256 class selectors can kill 1 ID selectors « Zhang Xin Xu
-
Interesting discussion: http:// weibo.com/1621464661/eawpzntpdws?type=repost#_rnd1381321567348
-
Ie6-10,firefox,webkit, 256 class weights are higher than ID (Chrome 24 fix)
Demo: http:// jsbin.com/uzilela/3/edit ,http:// jsbin.com/ixidec/1/edit
WebKit bug fixed: CSSSelector.cpp in Trunk/webcore/css
Opera with 16-bit storage, So more than 65,536 of them will be big.
http/lists.w3.org/archives/public/www-style/2012aug/0462.html
Calculation of CSS Selector precedence