css 權(quán)重值(層疊性)實(shí)例詳解
我要評(píng)論•css中有很多選擇器,那在多個(gè)選擇器都作用于同一個(gè)元素的情況下會(huì)出現(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)這種效果是因?yàn)闉g覽器是根據(jù)權(quán)重值來(lái)判斷使用哪種css樣式的，權(quán)重值高的它的優(yōu)先級(jí)會(huì)越高，就會(huì)呈現(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é) : 繼承元素是沒(méi)有權(quán)重值的,所以最終結(jié)果為通用選擇器設(shè)置的樣式
•實(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è)置的樣式
•實(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é)果
•實(shí)例五 代碼
<!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)重值的計(jì)算
<!--有一個(gè)這樣的結(jié)構(gòu)：-->
<div class='wrap1' id='box1'>
<div class="wrap2" id="box2">
<p class='active'>MJJ</p>
</div>
</div>
<!--舉幾個(gè)例子看看他們的權(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-->
<!--由此可以看出，其實(shí)對(duì)于權(quán)重值的計(jì)算來(lái)說(shuō)，首先它是不進(jìn)位的，對(duì)于使用的選擇器我們無(wú)非就是在數(shù)數(shù)，數(shù)選擇器的數(shù)量(按照順序來(lái)，先是id再是class，再是元素)，比如：-->
#box1 .wrap2 div{ color:red; } <!--權(quán)值為 1 1 1-->
注意：繼承來(lái)的屬性也有權(quán)重值，不過(guò)它的權(quán)值非常低,可以理解為繼承的權(quán)重值最低。
!important 提升權(quán)重值實(shí)例
<!--我們?cè)谧鼍W(wǎng)頁(yè)代碼時(shí)，有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)重值，怎么辦？比如我們知道內(nèi)聯(lián)樣式的權(quán)重值是1000，比較大，那么我們可以使用!important來(lái)解決。-->
<!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是一個(gè)壞習(xí)慣，應(yīng)該盡量避免，因?yàn)檫@嚴(yán)重破壞了樣式表中固有的權(quán)重值比較規(guī)則，使得在調(diào)試bug變得更加困難。當(dāng)兩條相互沖突的帶有!important規(guī)則作用與同一個(gè)標(biāo)簽，那么擁有最大優(yōu)先級(jí)的將會(huì)被采用。
什么情況下可以使用!important ?
•第一種
◦你的網(wǎng)站上有一個(gè)設(shè)計(jì)了全站樣式的css文件
◦同時(shí)你或者你的小伙伴寫了一些很差的內(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)重值(層疊性)實(shí)例詳解 ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇淺談CSS中的繼承性,特殊性,層疊性和重要性。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-09
這篇文章主要介紹了CSS中理解層疊性及權(quán)重如何分配,CSS的三大特性，分別是層疊性、優(yōu)先性和繼承性，本文給大家詳細(xì)講解，對(duì)css層疊性權(quán)重相關(guān)知識(shí)感興趣的朋友跟隨小編一起2022-10-24
