溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS選擇器的權重是什么的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS選擇器的權重是什么文章都會有所收獲，下面我們一起來看看吧。
權重就是我同個元素，有多個選擇器的情況下，我該選擇哪一個選擇器的樣式。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#p{
background: red;
}
.p{
background: skyblue;
}
p{
background: green;
}
</style>
</head>
<body>
<p style="background: pink" id="p">行內的樣式</p>
<p class="p" id="p">id的樣式</p>
<p class="p">class的樣式</p>
<p>p標簽的樣式 </p>
</body>
</html>通過上面的比較，可以得出，行內樣式>id選擇器>類選擇器>標簽選擇器>通配符
那么有沒有可能讓標簽選擇大于所有的選擇器呢，答案是有的，只要加上這行代碼!important，任何選擇器的權重就是無限大了。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#p{
background: red;
}
.p{
background: skyblue;
}
p{
background: green !important;
}
*{
background: brown
}
</style>
</head>
<body>
<p style="background: pink" id="p">行內的樣式</p>
<p class="p" id="p">id的樣式</p>
<p class="p">class的樣式</p>
<p>p標簽的樣式 </p>
</body>
</html>ID選擇器 #id
類選擇器 .class
標簽選擇器 p,div等
屬性選擇器 [type="text"]
通用選擇器 *
偽類選擇器 :hover
偽元素選擇器 ::before
子選擇器、相鄰選擇器
第一等：行內樣式是 1000，行內樣式雖然沒被列入選擇器里，但它的權重是最高的
第二等：id選擇器是 100
第三等：類選擇器、偽類選擇。屬性選擇器、屬性選擇器 10
第四等：標簽選擇器和偽元素選擇器 1
其他選擇器的權重為0
繼承的樣式沒有權重
如果等級相同，那么最后的樣式會覆蓋前面的樣式
最后請記住!important 的權重是無限大的
將選擇器的權重加起來
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body input{
color: blue;
}
input{
color: red;
}
</style>
</head>
<body>
<input type="text" name="" value="ssss">
</body>
</html>最終的樣式是文字為藍色
因為body input 的權重是2，body,input每個的權重是1，所以加起來就2
#id .input input{
color: yellow;
}上面的權重就是 100 + 10 +1 = 111
關于“CSS選擇器的權重是什么”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“CSS選擇器的權重是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
