Understanding of CSS selector weight (personal test)

Copy code

The code is as follows:

Copy code

The code is as follows:

In the above example, the final display effect is font-size: 16px, not the following font-size: 14px;
This combination of selectors has a quick method to judge:
0,0,0,0
The first digit represents the style written on the label, such as

Copy code

The code is as follows:

The second digit represents the id selector, such as #demo {}
The third digit represents: class name (.demo {}) or pseudo class (:hover) or attribute selector [rel="xx"]
The fourth digit represents: tag selector p {}
Now let’s practice with the first example:

Copy code

The code is as follows:

div.ui_infor p {font-size: 16px;}

Its weights are: 0,0,1,2

Copy code

The code is as follows:

.ui_infor p {font-size: 14px;}

Its weights are: 0,0,1,1
Result: 0,0,1,2 > 0,0,1,1, so font-size: 16px is displayed;
Supplement: !important has the highest weight, so there is no need to judge, but it will cause a bug in IE-6 browser.
example:

Copy code

The code is as follows:

p {font-size: 18px !important;font-size: 12px;}

In IE-6 browser, font-size: 12px is displayed. Some information on the Internet says that IE-6 does not support !important, which is actually wrong.
Let’s look at an example:

Copy code

The code is as follows:

p {font-size: 18px !important;}
p {font-size: 12px;}

In IE-6, font-size: 18px is displayed, which means that IE-6 supports !important, but the performance is a bit weird. The weird thing is that the !important attribute is overwritten by the latter style with the same name.
For example, in the example p {font-size: 18px !important;font-size: 12px;}, font-size: 12px overrides font-size: 18px !important.
Using this quirk, you can implement "min-height" in IE-6 without using CSS_hack

Copy code

The code is as follows:

p { min-height: 50px; height:auto !important; height:50px;}

<<: Introduction to the process of extending the boot partition in Kylin 4.0.2 (Ubuntu)

>>: MySQL tutorial thoroughly understands stored procedures