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

Understanding of CSS selector weight (personal test)

Detailed explanation of Vue components

Vue implements image dragging and sorting

CUDA8.0 and CUDA9.0 coexist under Ubuntu16.04

Detailed explanation of the solution to the problem that FTP cannot connect to the Baota Linux panel

Ten Experiences in Web Design in 2008

Linux confirms that the data disk has been uninstalled and a new custom image can be created

MySQL 8.0.15 installation and configuration graphic tutorial and password change under Linux

MySQL whole table encryption solution keyring_file detailed explanation

MySQL query duplicate data (delete duplicate data and keep the one with the smallest id as the only data)

Detailed explanation of Linux zabbix agent deployment and configuration methods

Recommend

Realizing tree-shaped secondary tables based on angular

Solution to IDEA not being able to connect to MySQL port number occupation

Example code of the spread operator and its application in JavaScript

Specific use of Docker anonymous mount and named mount

A brief analysis of the principles of NFS servers and the steps for building, configuring and deploying them

Vue3 implements CSS infinite seamless scrolling effect

MySQL transaction concepts and usage in-depth explanation

Solution to inconsistent display of cursor size in input box

The connection between JavaScript constructors and prototypes

Solve the problem of shrinking Mysql transaction log and log files being too large to shrink

$nextTick explanation that you can understand at a glance

Solution to the problem of MySQL thread in Opening tables

Vue realizes the product magnifying glass effect

Introduction to the process of creating TCP connection in Linux system

onfocus="this.blur()" is hated by blind webmasters