css 權(quán)重值(層疊性)實例詳解
我要評論•css中有很多選擇器,那在多個選擇器都作用于同一個元素的情況下會出現(xiàn)什么效果呢? 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color:red;
font-size: 10px;
}
#wrap{
color: deeppink;
font-size: 30px;
}
.box{
color:yellow;
font-size: 50px;
}
</style>
</head>
<body>
<p class='box' id="wrap">
猜猜我是什么顏色
</p>
</body>
</html>
•執(zhí)行可結(jié)果
•小結(jié) : 出現(xiàn)這種效果是因為瀏覽器是根據(jù)權(quán)重值來判斷使用哪種css樣式的，權(quán)重值高的它的優(yōu)先級會越高，就會呈現(xiàn)那種css樣式,id選擇器的權(quán)重值為100>類選擇器10>標(biāo)簽選擇器1,所以最終結(jié)果為id選擇器設(shè)置的樣式
•示列二 代碼
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
color: cyan;
}
div {
color: yellow;
}
</style>
</head>
<body>
<div>
<p class='box' id="wrap">
猜猜我是什么顏色
</p>
</div>
</body>
</html>
•執(zhí)行結(jié)果
•小結(jié) : 繼承元素是沒有權(quán)重值的,所以最終結(jié)果為通用選擇器設(shè)置的樣式
•實例三 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color: yellow;
}
*{
color: cyan;
}
</style>
</head>
<body>
<div>
<p class='box' id="wrap">
猜猜我是什么顏色
</p>
</div>
</body>
</html>
•執(zhí)行結(jié)果
•小結(jié) : 標(biāo)簽選擇器的權(quán)重值是1,但是仍然大于通用選擇器,所以最終結(jié)果為標(biāo)簽選擇器設(shè)置的樣式
•實例四 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div p{
color: yellow;
}
div>p{
color: cyan;
}
p{
color: red;
}
</style>
</head>
<body>
<div>
<p class='box' id="wrap">
猜猜我是什么顏色
</p>
</div>
</body>
</html>
•執(zhí)行結(jié)果
•實例五 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div>p{
color: cyan;
}
div p{
color: yellow;
}
p{
color: red;
}
</style>
</head>
<body>
<div>
<p class='box' id="wrap">
猜猜我是什么顏色
</p>
</div>
</body>
</html>
•執(zhí)行結(jié)果
權(quán)重值的計算
<!--有一個這樣的結(jié)構(gòu)：-->
<div class='wrap1' id='box1'>
<div class="wrap2" id="box2">
<p class='active'>MJJ</p>
</div>
</div>
<!--舉幾個例子看看他們的權(quán)重值：-->
p{color:gray;} <!--權(quán)值為1-->
div div p{color:yellow;} <!--權(quán)值為1+1+1=3-->
.active{color:red;} <!--權(quán)值10-->
div .active{color:black;} <!--權(quán)值為11-->
div div .active{color:blue;} <!--權(quán)值為12-->
.wrap #box2 .active{color:purple;} <!--權(quán)值為120-->
#box1 #box2 .active{color:green;} <!--權(quán)值為210-->
<!--由此可以看出，其實對于權(quán)重值的計算來說，首先它是不進(jìn)位的，對于使用的選擇器我們無非就是在數(shù)數(shù)，數(shù)選擇器的數(shù)量(按照順序來，先是id再是class，再是元素)，比如：-->
#box1 .wrap2 div{ color:red; } <!--權(quán)值為 1 1 1-->
注意：繼承來的屬性也有權(quán)重值，不過它的權(quán)值非常低,可以理解為繼承的權(quán)重值最低。
!important 提升權(quán)重值實例
<!--我們在做網(wǎng)頁代碼時，有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)重值，怎么辦？比如我們知道內(nèi)聯(lián)樣式的權(quán)重值是1000，比較大，那么我們可以使用!important來解決。-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>!important的使用</title>
<style type="text/css">
div{
color:green !important;
}
</style>
</head>
<body>
<div id="box" style="color:red;">
<span>MJJ</span>
</div>
</body>
</html>
•執(zhí)行結(jié)果
•小結(jié): 使用!important是一個壞習(xí)慣，應(yīng)該盡量避免，因為這嚴(yán)重破壞了樣式表中固有的權(quán)重值比較規(guī)則，使得在調(diào)試bug變得更加困難。當(dāng)兩條相互沖突的帶有!important規(guī)則作用與同一個標(biāo)簽，那么擁有最大優(yōu)先級的將會被采用。
什么情況下可以使用!important ?
•第一種
◦你的網(wǎng)站上有一個設(shè)計了全站樣式的css文件
◦同時你或者你的小伙伴寫了一些很差的內(nèi)聯(lián)樣式
•第二種
box p { color: blue; } p.awesome { color: red; }
怎樣才能使得文本的顏色變?yōu)榧t色？這種情況下，如果不適用!important.第一條規(guī)則永遠(yuǎn)大于第二條的規(guī)則。
總結(jié):
總結(jié)
以上所述是小編給大家介紹的css 權(quán)重值(層疊性)實例詳解 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
- 下面小編就為大家?guī)硪黄獪\談CSS中的繼承性,特殊性,層疊性和重要性。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-09
這篇文章主要介紹了CSS中理解層疊性及權(quán)重如何分配,CSS的三大特性，分別是層疊性、優(yōu)先性和繼承性，本文給大家詳細(xì)講解，對css層疊性權(quán)重相關(guān)知識感興趣的朋友跟隨小編一起2022-10-24
