css-Selector-Priority

<! DOCTYPE html>
CSS Selector Precedence
At the same priority level, the position is preceded by the overwrite of the
The higher the precedence level, the more specific the CSS selectors of the element can be described.

Specific situation:
HTML element inherits the parent element's CSS property precedence-100
Default CSS property precedence for HTML elements given by the browser-10

Asterisk Selector Priority 0
*{background: #f00;}

Type (label) selector Priority 1
Div{background: #0f0;}

Class name and Pseudo-class selector priority 10
. Aaa{background: #00f;}

ID Selector Priority 100
#bbb {background: #ff0;}

HTML in-line style priority 1000
<div style= "background: #0f0;" > in-line style priority 1000</div>

!important Priority Level 10000
Div{background: #0f0!important;}
<!--
<style>
#b1 {color: #ff0;}
. A1{color: #00f;}
Div{color: #0f0!important;}
*{color: #f00;}
</style>

<div class= "A1" Id= "B1" style= "color: #0ff;" > Hello, I'm div1</div>.
<span> Hello, I'm span2<span>.
<p>
Pppppppppp
<span>ssssssssssss</span>
<a href= "# #" >aaaaaaaa</a>
</p>
<a href= "# #" >aaaaaaaa</a>
-
Combination Priority:
<style>
#wai,. Nei, span, A{color: #f00;}/* Priority each Independent */
#wai a{color: #ff0;}/*101*/
Div p span a{color: #00f;}/*4*/
Div. nei span a{color: #0ff;}/*13*/
</style>

<div id= "Wai" >
Ddddddddddddd
<p class= "Nei" >
Pppppppppp
<span>
Ssssssssssss
<a href= "# #" >aaaaaaa</a>
</span>
</p>
</div>
<a href= "# #" >bbbbbbbb</a>

css-Selector-Priority