首頁  >  文章  >  web前端  >  css3哪個屬性改變層疊性

css3哪個屬性改變層疊性

青灯夜游
青灯夜游原創
2022-01-13 14:50:452095瀏覽

在css3中,可以利用「!important」規則來改變層疊性,該規則用於增加指定樣式的權重,進而改變樣式的層疊性,語法為「選擇器{屬性: 值!important ;}」。

css3哪個屬性改變層疊性

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

什麼是層疊性?

層疊性就是瀏覽器處理衝突的特性,如果一個屬性透過多個選擇器設定到同一個元素上面,那麼這個時候就會只有一個選擇器運作,而其他的選擇器都將被層疊掉。

定義:相同選擇器設定相同的樣式,此時其中一個樣式會覆寫另一個衝突的樣式。

作用:解決樣式衝突的問題。

層疊性原則:當發生樣式衝突時,就遵循就近原則。

CSS層疊性的體現:

1:樣式無衝突

/* 多个选择器选择同一个元素,样式并无冲突时 */
.box_one{
    width:100px;
    height:100px;  
}
.box_two{
    background:red;
}
<body>
     <div class="box_one box_two"></div>
</body>

以上程式碼中,樣式程式碼並無衝突,兩個選擇器中的所有樣式都疊加到了元素div上,div最終呈現的是一個紅色的,寬高度大小為100px的容器。

css3哪個屬性改變層疊性

2:樣式有衝突

樣式有衝突,同一層級不受優先權影響時

.box_one{
   width:100px;
   height:100px;
 }
.box_two{
    width:200px;
    background:red;
}
<body>
    <div class="box_one box_two"></div>
</body>

以上程式碼中,在同級別時(同級元素,同是class定義選擇器名稱),樣式代碼出現衝突,兩個選擇器中出現同一條width屬性,則以CSS代碼中最後出現的那條樣式為準, div最終呈現的是一個width為200px,height為100px,紅色的容器。

css3哪個屬性改變層疊性

樣式有衝突,不同等級受優先權(權重)的影響時

CSS規定基本選擇器的優先權由低到高排序為:元素(標記)樣式

那麼css3哪個屬性改變層疊性

#在css3中,可以利用「!important」規則來改變層疊性。

CSS 中的 !important 規則用於增加樣式的權重。

!important 與優先權無關,但它與最終的結果直接相關,使用一個 !important 規則時,此宣告會覆寫任何其他宣告。

<!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>段落中的一些文本内容!!!都会显示红色,因为 !important 作用,你可以删除该规则来看看效果。</p>

<p class="myclass">段落中的一些文本内容!!!都会显示红色,因为 !important 作用,你可以删除该规则来看看效果。</p>

<p id="myid">段落中的一些文本内容!!!都会显示红色,因为 !important 作用,你可以删除该规则来看看效果。</p>

</body>
</html>

css3哪個屬性改變層疊性

修改一下p選擇器樣式的權重:

p {
  background-color: red !important;
}

css3哪個屬性改變層疊性

以上實例中,儘管ID 選擇器和類別選擇器具有較高的優先權,但三個段落背景顏色都顯示為紅色,因為!important 規則會覆寫background-color 屬性。

(學習影片分享:css影片教學

以上是css3哪個屬性改變層疊性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn