A brief discussion on CSS cascading mechanism

A brief discussion on CSS cascading mechanism

Why does CSS have a cascading mechanism?

Because in CSS there may be multiple styles that affect a certain property of the same element at the same time, the cascading mechanism can resolve style conflicts between authors (people who write code), users (people who browse pages), and user agents (generally browsers).

Each style rule in the cascade has a weight value. When several of these rules are in effect at the same time, the rule with the highest weight takes precedence. Generally speaking, the style weight value specified by the author is higher than the user style weight value, and the user style weight is higher than the client (user agent) weight value. General weight value and object, whether there is! important, specificity is related to position. In the stacking order, the following weight values ​​are from small to large

(1) User agent style

(2) User general style

(3) Author’s general style

(4) Author important style (!important)

(5) User important styles (!important)

(6) If two styles come from the same code, such as both come from the author (code), and their style declarations are equally important, they are calculated based on specificity, and the one with higher specificity will override the one with lower specificity.

(7) If the specificity is the same, the later the style, the higher the priority.

Why do important styles set by users have higher priority than important styles set by authors? The reason for this is to facilitate users to achieve some special requirements, such as adjusting the page font size.

Calculation of selector specificity

(1) If a declaration appears in the style attribute of an element, a is counted as 1;

(2) b is equal to the sum of the number of all ID selectors in the selector

(3) c is equal to the sum of all class selectors, attribute selectors, and pseudo-class selectors in the selector.

(4) d is equal to the sum of all tag selectors and pseudo-element selectors in the selector.

abcd is the specificity of the selector. The comparison order starts from a, and the larger one has a higher priority.

Notice:

  1. Inherited has the lowest priority and no specificity
  2. The specificity of the combiner (such as +, >) and the universal selector (*) is 0
.box{} /*Specificity=0,0,1,0*/
.box div{} /*Specificity=0,0,1,1*/
#nav li{} /*Specificity=0, 1, 0, 1*/
p:first-line{} /*Specificity=0,0,0,2*/
style="" /*Specificity=1,0,0,0*/

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Analysis and solution of a MySQL slow log monitoring false alarm problem

>>:  HTML form tag tutorial (3): input tag

Recommend

The difference between useEffect and useLayoutEffect in React

Table of contents Prerequisites useEffect commitB...

Practical record of optimizing MySQL tables with tens of millions of data

Preface Let me explain here first. Many people on...

MySQL uses the truncate command to quickly clear all tables in a database

1. Execute the select statement first to generate...

Incredible CSS navigation bar underline following effect

The first cutter in China github.com/chokcoco Fir...

A detailed introduction to deploying RabbitMQ environment with docker

Prerequisites: Docker is already installed 1. Fin...

Windows 2019 Activation Tutorial (Office2019)

A few days ago, I found that the official version...

Installation process of CentOS8 Linux 8.0.1905 (illustration)

As of now, the latest version of CentOS is CentOS...

Detailed View of Hidden Columns in MySQL

Table of contents 1. Primary key exists 2. No pri...

jQuery implements font size adjustment case

This article shares the specific code of jQuery t...

Example code for converting html table data to Json format

The javascript function for converting <table&g...

Using iframe techniques to obtain visitor QQ implementation ideas and sample code

Today at work, a friend I added temporarily asked ...