Calculation of CSS Selector precedence

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:

• Count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

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:

1. Number of ID selectors "such as: #header" (=a)
   

2. Class selector "such as:. foo", attribute selector "such as: [Class]", Pseudo-class "such as:: link" number (=B)
   

3. Tag Selector "such as: h1", pseudo-elements "such as:: after" number (=C)
   

4. Ignore "*" Selector
   

5. Although pseudo-classes (such as: hover) participate in the calculation of CSS precedence, ":not" does not participate in calculations.
   

6. 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