Give an example of the precedence in CSS

Calculation priority

Precedence is based on a cascade string of characters that are composed of each selector type. He is the weight of a corresponding matching expression. If the precedence is the same, the back CSS is applied to the element.

Note: The position of the element in the document tree does not affect the priority

Order of Precedence

List of selectors with an incremental priority:

Universal Selector (*)

Element (type) Selector

Class Selector

Property Selector

Pseudo class

ID Selector

inline style

Type-based precedence

The priority is calculated based on the selector type. In the following example, the property selector, although it chooses an ID, is evaluated by its type in the precedence algorithm.

There are the following style declarations:

CSS code copy content to clipboard

* #foo {

Color:green;

}

*[id= "Foo"] {

Color:purple;

}

Apply it to the following HTML:

xml/html code to copy content to clipboard

　　

I am a sample text.

Demo Example: https://jsfiddle.net/donqi/vmo5m3re/

Selector priority consistent

With the same priority, the definition below overrides the

xml/html code to copy content to clipboard

　　

 

　　

　　

 

Css:

CSS code copy content to clipboard

div{

height:100px;

width:100px;

padding:20px;

margin:20px;

border:10px solid Hsla (0,0%,0%,0.5);

Background-color: #ccc;

Background-image:url ("/favicon.png");

Background-repeat:space;

Background-origin:content-box;

}

div.box{

Background-clip:content-box;

}

div.border{

Background-clip:border-box;

}

div.padding{

Background-clip:padding-box;

}