長沙前端培訓(xùn)機構(gòu)分享：CSS的特性之層疊性
初學(xué)者在學(xué)習(xí)到CSS的時候會了解到它具有繼承性、層疊性、優(yōu)先級等等不同的屬性，如果不了解這些屬性會導(dǎo)致我們在使用它的時候出現(xiàn)各種各樣的問題，今天長沙前端培訓(xùn)機構(gòu)小編就來給大家介紹一下CSS的層疊性屬性。
CSS層疊性的概念：有多個選擇器或一個選擇器對某個或某幾個標簽中的多條樣式進行選擇，如果多個選擇器都賦給某個或某幾個標簽相同屬性，樣式的作用范圍發(fā)生了重疊，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。
2-1：類別（class）樣式 VS 元素（標記）樣式
.box_one{
width:200px;
background:red;
}
div{
width:100px;
height:100px;
}
<body>
<div class="box_one"></div>
</body>
以上代碼中，class樣式的優(yōu)先級大于元素樣式的優(yōu)先級，即使div設(shè)置的width寫在后面，最終呈現(xiàn)的是一個width：200px，height：100px；背景色為紅色的容器。
2-2：ID樣式 VS 類別（class）樣式
#box{
width:200px;
background:yellow;
}
.box_one{
width:100px;
height:100px;
background:red;
}
<body>
<div class="box_one" id="box"></div>
</body>
以上代碼中，ID樣式的優(yōu)先級大于class樣式的優(yōu)先級，最終呈現(xiàn)的是一個width：200px，height：100px；背景色為黃色的容器。
2-3：行內(nèi)樣式 VS ID樣式
#box{
width:200px;
background:yellow;
}
.box_one{
width:100px;
height:100px;
background:red;
}
<body>
<div class="box_one" id="box" style="background:pink"></div>
</body>
以上代碼中，CSS行內(nèi)樣式優(yōu)先于ID的樣式，div最終呈現(xiàn)的是一個寬度為200px，高度100px，背景顏色為粉色的容器。
2-4： !important VS 行內(nèi)樣式
.box_one{
width:100px!important;
height:100px;
background:red!important;
}
#box{
width:200px;
}
<body>
<div class="box_one" id="box" style="background:pink"></div>
</body>
在CSS中，!important具有最高優(yōu)先級，并且可以寫在任意一條有沖突樣式的后面。在以上代碼中，div在行內(nèi)樣式表設(shè)置背景色為粉色，ID樣式中width為200px；但是在class樣式中，width：100px及背景色為red的后面都添加了!important，因此，最終呈現(xiàn)的是一個寬度為100px，高度為100px，背景色為紅色的容器。
猜你喜歡LIKE
最新文章NEW
相關(guān)推薦HOT
更多>>熱門推薦
零基礎(chǔ)必看的前端HTML+CSS教程
沸Java培訓(xùn)新手實戰(zhàn)必備！單機版坦克大戰(zhàn)分步實現(xiàn)項目源碼
熱3種Javascript圖片預(yù)加載的方法詳解
熱長沙前端培訓(xùn)：一招教你用vue3+canvas實現(xiàn)坦克大戰(zhàn)
新互聯(lián)網(wǎng)涼了？參加長沙Java培訓(xùn)能找到工作嗎？
長沙Java培訓(xùn)實戰(zhàn)項目，出游咨詢訂票系統(tǒng)開發(fā)流程
不參加長沙Java培訓(xùn)能學(xué)會Java嗎？2022Java技能學(xué)習(xí)路線圖
千鋒長沙Java培訓(xùn)分享之怎么學(xué)習(xí)Java集合？
千鋒長沙前端培訓(xùn)分享之JavaScript面向?qū)ο缶幊趟枷朐斀?/p>
千鋒長沙前端培訓(xùn)分享之web前端的回流和重繪
千鋒長沙前端培訓(xùn)分享之3種Javascript圖片預(yù)加載的方法詳解
千鋒長沙前端培訓(xùn)分享之利用Jest測試React組件
千鋒長沙前端培訓(xùn)分享之JavaScript中Slice的用例
千鋒長沙java培訓(xùn)分享之Socket編程
技術(shù)干貨
快速通道 更多>>
-
課程介紹
點擊獲取大綱 -
就業(yè)前景
查看就業(yè)薪資 -
學(xué)習(xí)費用
了解課程價格 -
優(yōu)惠活動
領(lǐng)取優(yōu)惠券 -
學(xué)習(xí)資源
領(lǐng)3000G教程 -
師資團隊
了解師資團隊 -
實戰(zhàn)項目
獲取項目源碼 -
開班地區(qū)
查看來校路線
京公網(wǎng)安備 11010802030320號