樣式的沖突:當多個選擇器對同一進制素進行樣式的控制
發生樣式的沖突時,選擇哪個樣式是由選擇器的優先級決定的
選擇器的優先級:内聯樣式>id選擇器>class選擇器和僞類選擇器>元素選擇器
内聯樣式:1000
id選擇器:100
class選擇器和僞類選擇器:110
元素選擇器:1
注意:在比較優先級時,會對所有選擇器的優先級進行累加計算,優先級越高,則優先顯示
選擇器的累加不會超過最大數量級,類選擇器的累加不會超過id選擇器的
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS選擇器的優先級問題</title>
<style>
p{
color: turquoise;
}
.yamdClass{
color: tomato;
}
div#div1{
background-color: royalblue;
}
div{
border: 1px solid red;
}
#div1{
background-color:rosybrown;
}
/* 分組選擇器優先級将分别計算,不會相加 */
div,span,p{
background-color: slateblue;
}
</style>
</head>
<body>
<div id="div1">she is so sexy!</div>
<p class="yamdClass">you are my destiny</p>
<span>I want to be friendly!</span>
</body>
</html>
![CSS的僞類與僞元素的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)