Kadangkala kami menetapkan kod gaya CSS yang berbeza untuk elemen yang sama, jadi gaya CSS yang manakah akan didayakan untuk elemen tersebut. Mari kita lihat kod berikut:
p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> Kedua-dua p dan .first sepadan dengan teg p , jadi yang mana? warna akan dipaparkan? hijau adalah warna yang betul, jadi mengapa? Ini kerana penyemak imbas menentukan gaya CSS yang hendak digunakan berdasarkan berat, dan gaya CSS dengan berat yang lebih tinggi digunakan.
Berikut ialah peraturan berat:
Berat label ialah 1, berat pemilih kelas ialah 10, dan berat pemilih ID ialah sehingga 100. Contohnya, kod berikut:
p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/Nota: Ada satu lagi berat istimewa - Warisan juga mempunyai berat tetapi ia sangat rendah. Sesetengah literatur mencadangkan bahawa ia hanya 0.1, jadi boleh difahami pewarisan mempunyai berat yang paling rendah.
<!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;}/*因为权值高显示为绿色*/
span{color:pink;}/*设置为粉色*/
p span{color:purple;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>
