CSS selector priority

Today, I saw a blog post on Google Reader. After I asked several colleagues in the group, I found that I had always had a misunderstanding about CSS selector. It is said that foreignersArticleI mentioned very early that CSS selector is a priority.AlgorithmAfter being translated by some people in China, I misunderstood the meaning, as a result, many people think that the priority Calculation of CSS selector is to add all ID names, class names, and so on before comparison.
This blog post is named "CSS selector priority". It focuses on the "11 classes and 1 ID" topic. Here we will not go into the details, you can click the link above to browse directly. Simply put, a div with the ID and class names is contained by ten Divs, and the style is:

. A1. A2. A3. A4. A5. A6. A7. A8. A9. A10. A11 {color: red ;}
# B {color: green ;}
The HTML structure is long as follows:

<Div>
<Div id = "B">
CSS selector priority
</Div>
</Div>
According to our previous understanding, the class in CSS is 10, and the ID is 100. Then we naturally thought that if we had 11 classes, it would be 110. In this way, it will be bigger than the ID. The final color should be red, but it is not. The final color is green, which is the ID color.

At that time, I was very puzzled when I saw this, and then I was confused when I read the introduction in the article. Later, after being guided by my colleagues in the Group and my BS who were very serious to myself, I finally understood why. In fact, when I was reading some books, the numbers that contain numbers 1 and 0 are actually only 1 and 0, not 1000, 100, 10, and 1.

As shown in the figure, when an ID is selected, it is 0, 1, 0, 0, and then the two IDs are 0, 2, 0, 0, and so on, this means that the second number from the left will increase progressively, but this number is only increasing. Similarly, the same applies to the use of class delimiters. Return to the problem of "11 classes and 1 ID" mentioned above. The calculation result is as follows:

1 ID: 0, 1, 0, 0
11 class: 0, 0, 11, 0
Additional reading: http://www.cssforest.org/blog/index.php? Id = 164

Obviously, the ID style will certainly appear in this problem, but the class style will not appear. Keep in mind this lesson, spend more time reading articles from foreigners, and consolidate and better master basic knowledge.