CSS specificity
Sometimes we set different CSS style codes for the same element, so which CSS style will be enabled for the element? Let’s take a look at the following code:
p{color:red;}
.first{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>Both p and .first match the p tag, so which color will be displayed? green is the correct color, so why? This is because the browser determines which CSS style to use based on the weight, and the CSS style with the higher weight is used.
The following are the weight rules:
The weight of the label is 1, the weight of the class selector is 10, and the maximum weight of the ID selector is 100. For example, the following code:
p{color:red;} /*權(quán)值為1*/p span{color:green;} /*權(quán)值為1+1=2*/.warning{color:white;} /*權(quán)值為10*/p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/Note: There is also a special weight value--Inheritance also has a weight value but it is very low. The literature proposes that it is only 0.1, so it can be understood as the inherited weight is the lowest.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>特殊性</title>
<style type="text/css">
p{color:red;}
.first{color:green;}/*因?yàn)闄?quán)值高顯示為綠色*/
span{color:pink;}/*設(shè)置為粉色*/
p span{color:purple;}
</style>
</head>
<body>
<h1>勇氣</h1>
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學(xué)校舉辦的活動我也沒勇氣參加。</p>
<p id="second">到了三年級下學(xué)期時，我們班上了一節(jié)公開課，老師提出了一個很簡單的問題，班里很多同學(xué)都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p>
</body>
</html>
