溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“css3如何改變層疊性”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“css3如何改變層疊性”吧!
在css3中，可以利用“!important”規(guī)則來改變層疊性，該規(guī)則用于增加指定樣式的權(quán)重，進而改變樣式的層疊性，語法為“選擇器 {屬性: 值 !important;}”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
什么是層疊性？
層疊性就是瀏覽器處理沖突的一個特性，如果一個屬性通過多個選擇器設(shè)置到同一個元素上面，那么這個時候就會只有一個選擇器起作用，而其他的選擇器都將被層疊掉。
定義：相同選擇器設(shè)置相同的樣式，此時其中一個樣式會覆蓋另一個沖突的樣式。
作用：解決樣式?jīng)_突的問題。
層疊性原則：當(dāng)發(fā)生樣式?jīng)_突時，遵循就近原則。
CSS層疊性的體現(xiàn)：
1：樣式無沖突
/* 多個選擇器選擇同一個元素，樣式并無沖突時 */
.box_one{
width:100px;
height:100px;
}
.box_two{
background:red;
}
<body>
<div class="box_one box_two"></div>
</body>以上代碼中，樣式代碼并無沖突，兩個選擇器中的所有樣式都疊加到了元素div上，div最終呈現(xiàn)的是一個紅色的，寬高度大小為100px的容器。
2：樣式有沖突
樣式有沖突，同一級別不受優(yōu)先級影響時
.box_one{
width:100px;
height:100px;
}
.box_two{
width:200px;
background:red;
}
<body>
<div class="box_one box_two"></div>
</body>以上代碼中，在同級別時（同個元素，同是class定義選擇器名稱），樣式代碼出現(xiàn)沖突，兩個選擇器中出現(xiàn)同一條width屬性，則以CSS代碼中最后出現(xiàn)的那條樣式為準，div最終呈現(xiàn)的是一個width為200px，height為100px，紅色的容器。
樣式有沖突，不同級別受優(yōu)先級（權(quán)重）的影響時
CSS規(guī)定基本選擇器的優(yōu)先級從低到高排序為：元素（標記）樣式 < 類別（class）樣式 < ID樣式 < 行內(nèi)樣式 < !important。
那么css3哪個屬性改變層疊性
在css3中，可以利用“!important”規(guī)則來改變層疊性。
CSS 中的 !important 規(guī)則用于增加樣式的權(quán)重。
!important 與優(yōu)先級無關(guān)，但它與最終的結(jié)果直接相關(guān)，使用一個 !important 規(guī)則時，此聲明將覆蓋任何其他聲明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red ;
}
</style>
</head>
<body>
<p>段落中的一些文本內(nèi)容?。。《紩@示紅色，因為 !important 作用，你可以刪除該規(guī)則來看看效果。</p>
<p class="myclass">段落中的一些文本內(nèi)容！??！都會顯示紅色，因為 !important 作用，你可以刪除該規(guī)則來看看效果。</p>
<p id="myid">段落中的一些文本內(nèi)容?。?！都會顯示紅色，因為 !important 作用，你可以刪除該規(guī)則來看看效果。</p>
</body>
</html>
修改一下p選擇器樣式的權(quán)重：
p {
background-color: red !important;
}
以上實例中，盡管 ID 選擇器和類選擇器具有更高的優(yōu)先級，但三個段落背景顏色都顯示為紅色，因為 !important 規(guī)則會覆蓋 background-color 屬性。
到此，相信大家對“css3如何改變層疊性”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼