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; /*因?yàn)闄?quán)值高顯示為綠色*/
}
span{
color:pink; /*設(shè)置為粉色*/
}
</style>
</head>
<body>
<h1>勇氣</h1>
<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小孩，
上課從來不敢回答老師提出的問題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒有這個(gè)勇氣來回答老師提出的問題。學(xué)校舉辦的活動(dòng)我也沒勇氣參加。</p>
<p id="second">到了三年級(jí)下學(xué)期時(shí)，我們班上了一節(jié)公開課，老師提出了一個(gè)很簡(jiǎn)單的問題，班里很多同學(xué)都舉手了，甚至成績(jī)比我差很多的，
也舉手了，還說著："我來，我來。"我環(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
