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

Detailed explanation of Vue-router nested routing

Understanding of CSS selector weight (personal test)

Detailed explanation of Vue-router nested routing

The difference between absolute path and relative path in web page creation

Solution to 2059 error when connecting Navicat to MySQL

Web Design Tutorial (2): On Imitation and Plagiarism

8 commands to effectively manage processes in Linux

Solve the problem that the repository and tag names are both none after Docker loads a new image

Detailed tutorial on installation and configuration of compressed version of MySQL database

Who is a User Experience Designer?

How to use the markdown editor component in Vue3

Detailed explanation of HTML element height, offsetHeight, clientHeight, scrollTop, etc.

Recommend

Interviewers often ask questions about React's life cycle

Detailed explanation of Mysql master-slave synchronization configuration practice

Nginx/Httpd reverse proxy tomcat configuration tutorial

Docker Swarm from deployment to basic operations

VMware12 installs Ubuntu19.04 desktop version (installation tutorial)

How to install openssh from source code in centos 7

Recommended tips for web front-end engineers

MySQL Series 12 Backup and Recovery

javascript realizes 10-second countdown for payment

HTML solves the problem of invalid table width setting

vue+ts realizes the effect of element mouse drag

MySQL json format data query operation

3 functions of toString method in js

Detailed tutorial for downloading, installing and configuring MySQL 5.7.27

Detailed explanation of the solution to Tomcat's crash when double-clicking startup.bat