Particularity, inheritance, cascading in CSS_html/css_WEB-ITnose

Foreword

Recently I was reading "The Definitive Guide to CSS", and the third chapter of the book "Structure and Layering" explains the particularities very well. Let's sort out my thoughts today. The records are as follows.

Introduction of problems

　

It is a very simple list structure. If you want to set the font color of the word "first", there may be two ways Method:

　

Then the question is, what color will the font become?

CSS rule structure

　

The structure of each CSS rule is as above. Please remember their respective names, otherwise you will feel uncomfortable if you continue.

Specificity

The concept and function of specificity are described in detail in the book:

For each rule, the user agent (browser) ) calculates the selector's specificity and appends that specificity to each declaration in the rule.

If an element has two or more conflicting attributes, the declaration with the highest specificity wins.

Overall it is divided into two parts: calculation and comparison. I definitely don’t understand it at first sight, so let’s use it first, then come back and take a look when nothing happens, and it will suddenly become clear to you.

Calculation rules for specificity

As mentioned in the introduction to specificity, how to calculate specificity is very important. The following are the calculation rules given in the book ：

1. Inline style: 1,0,0,0

2. ID selector: 0,1,0,0

3. Class selector , Attribute selector, pseudo-class selector: 0,0,1,0

　4. Element selector, pseudo-element selector: 0,0,0,1

　5. Wildcard character Selector: 0,0,0,0

6. Combiner, inheritance: No speciality

7. !important: divided into two groups according to the presence or absence of this keyword, calculated separately

Note: There is no relationship between the four sets of numbers, and there is no carry. ​

The above rules cover all possible CSS selectors. The specificity of the relevant selector can be calculated based on these. The browser will assign the specificity to each declaration in the declaration block.

　

There are countless related examples, so I won’t count them. Just be able to calculate them.

Comparison rules of specificity: cascading

Looking back at the introduction of specificity, it can be seen that the calculation of specificity is for comparison, and then determines the winning style for display. The comparison Rules are called cascading, of course only if the declarations conflict. The rules are as follows:

1. First compare according to weight:

Reader important style>Creator important style>Creator normal style>Reader normal style>Browser default style

2. When the above conditions cannot be compared, compare according to the specificity:

The specificity compares each group of numbers from left to right, such as: 1,0,0,1 and 0,2,0 ,0, will be displayed according to the former defined style.

3. When the above conditions cannot be compared, they are compared in the order of appearance:

The one that appears later will overwrite the one that appears first.

Based on the above rules, the answer to the question can be drawn: the colors will be as follows:

　

Summary

First time I have gained a lot from organizing my blog. I usually just skimp on reading books, but this time I really learned a lot.