The particularity of getting started easily with HTML+CSS
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>特殊性</title>
<style type="text/css">
p{color:red;}
.first{
color:green; /*因為權(quán)值高顯示為綠色*/
}
span{
color:pink; /*設(shè)置為粉色*/
}
</style>
</head>
<body>
<h1>勇氣</h1>
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小孩，
上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學(xué)校舉辦的活動我也沒勇氣參加。</p>
<p id="second">到了三年級下學(xué)期時，我們班上了一節(jié)公開課，老師提出了一個很簡單的問題，班里很多同學(xué)都舉手了，甚至成績比我差很多的，
也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p>
</body>
</html>Both p and .first match On the p label, what 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;} /*The weight is 1*/
p span{color:green;} /*The weight is 1+1=2* /
.warning{color:white;} /*The weight is 10*/
p span.warning{color:purple;} /*The weight is 1+1+10= 12*/
#footer .note p{color:yellow;} /*The weight is 100+10+1=111*/
Note: There is another weight It's quite special - inheritance also has a weight but it's very low. Some literature suggests that it's only 0.1, so it can be understood that inheritance has the lowest weight
