CSS cascade
Let's think about a question: What if there can be multiple css styles for the same element in the html file and these multiple css styles have the same weight value? Well, the cascading in this section helps you solve this problem.
Cascading means that there can be multiple css styles for the same element in the html file. When there are styles with the same weight, it will be determined based on the order of these css styles. The last css style will be applied.
Such as the following code:
p{color:red;}
p{color:green;}
<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩。</p>Finally, the text in p will be set to green. This cascading is easy to understand. It is understood that the later styles will overwrite the previous styles.
So the previous CSS style priority is not difficult to understand:
Inline style sheet (inside the tag) > Embedded style sheet (in the current file) > External style Table (in external file) .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>層疊</title>
<style type="text/css">
p{color:red;}
p{color:green;}
p{color:pink;}
.first{ color:purple;}
#second{ color:orange;}
</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è)很<span>簡(jiǎn)單</span>的問題，班里很多同學(xué)都舉手了，甚至成績(jī)比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p>
</body>
</html>
