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

Detailed explanation of various methods of Vue component communication

Table of contents 1. From father to son 2. From s...

JavaScript determines whether the browser is IE

As a front-end developer, I can’t avoid IE’s pitf...

MySQL transaction, isolation level and lock usage example analysis

This article uses examples to describe MySQL tran...

vue+echarts realizes the flow effect of China map (detailed steps)

@vue+echarts realizes the flow effect of China ma...

Docker container from entry to obsession (recommended)

1. What is Docker? Everyone knows about virtual m...

Detailed explanation of the abbreviation of state in react

Preface What is state We all say that React is a ...

How to submit the value of a disabled form field in a form Example code

If a form field in a form is set to disabled, the ...

Linux method example to view all information of the process

There is a task process on the server. When we us...

How to set a fixed IP in Linux (tested and effective)

First, open the virtual machine Open xshell5 to c...

Complete steps to achieve high availability with nginx combined with keepalived

Preface In order to meet the high availability of...

Configure selenium environment based on linux and implement operation

1. Using Selenium in Linux 1. Install Chrome Inst...

Raspberry Pi msmtp and mutt installation and configuration tutorial

1. Install mutt sudo apt-get install mutt 2. Inst...

A brief discussion on the lazy loading attribute pattern in JavaScript

Table of contents 1. Introduction 2. On-demand at...