一天搞定CSS： CSS选择器优先级--08
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS： CSS选择器优先级--08
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
選擇器優(yōu)先級：是指代碼的執(zhí)行順序
通俗的說，就是多個選擇器同時對一個標簽分別添加樣式，那么這個標簽顯示那個選擇器設置的樣式1.優(yōu)先級規(guī)則
2.規(guī)則1和2說明
優(yōu)先級相同，誰后誰優(yōu)先
優(yōu)先級不同，優(yōu)先級高的優(yōu)先
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>/*1.選擇器的優(yōu)先級一至的情況下，誰在后誰的優(yōu)先級就高*//*div{width: 100px;height: 100px;background: red;}div{width: 100px;height: 100px;background: green;}*//*2.選擇器的優(yōu)先級不一致的情況下，會選擇優(yōu)先級高的---這里class>div*/.box{width: 100px;height: 100px;background: red;}div{width: 100px;height: 100px;background: green;}</style></head><body><!--優(yōu)先級 代碼執(zhí)行的順序選擇器的優(yōu)先級一致的情況下，誰在后誰的優(yōu)先級就高選擇器的優(yōu)先級不一致的情況下，會選擇優(yōu)先級高的--><div class="box"></div></body> </html>3.規(guī)則3說明
行間>id>class>標簽>通配符
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>/*3.行間樣式>id選擇器>類選擇器>標簽選擇器>通配符選擇器（*）*/body *{height: 100px;background: red;}div{height: 100px;background: green;}.div1{height: 100px;background: blue;}#box{height: 100px;background: yellow;}</style></head><body><!--優(yōu)先級 代碼執(zhí)行的順序行間樣式>id選擇器>類選擇器>標簽選擇器>通配符選擇器（*）--><div id="box" class="div1" style="background: pink;"></div><!--<div id="box" class="div1"></div>--><!--<div class="div1"></div>--><!--<div></div>--></body> </html>4.規(guī)則4說明
包含選擇器的優(yōu)先級是一種累加的關系，加起來的值越大優(yōu)先級就越高，值越小優(yōu)先級就低
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>/*4.包含選擇器的優(yōu)先級是一種累加的關系，加起來的值越大優(yōu)先級就越高，值越小優(yōu)先級就低*/#div3{height: 100px;background: red;}/*10+100=110*/.box2 #div3{height: 100px;background: green;}/*100+10=110*/#div1 .box3{height: 100px;background: yellow;}/*100+10=110*/#div2 .box3{height: 100px;background: blue;}/*100+1+1=102*/#div1 div div{height: 100px;background: pink;}</style></head><body><!--優(yōu)先級 代碼執(zhí)行的順序包含選擇器的優(yōu)先級是一種累加的關系，加起來的值越大優(yōu)先級就越高，值越小優(yōu)先級就低假設個選擇器的值設置為：行間樣式 1000id選擇器 100類選擇器 10標簽選擇器 1--><div class="box1" id="div1"><div class="box2" id="div2"><div class="box3" id="div3"></div></div></div></body> </html>5.規(guī)則5說明
群組選擇器的優(yōu)先級取決于位置，誰靠后誰的優(yōu)先級就高，會把前面的樣式給覆蓋了
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>/*5.群組選擇器的優(yōu)先級取決于位置，誰靠后誰的優(yōu)先級就高，會把前面的樣式給覆蓋了*/div,p,h1{width: 200px;height: 100px;background: red;margin-top: 50px;}div{background: green;}</style></head><body><!--優(yōu)先級 代碼執(zhí)行的順序群組選擇器的優(yōu)先級取決于位置，誰靠后誰的優(yōu)先級就高，會把前面的樣式給覆蓋了--><div></div><p></p><h1></h1></body> </html> 《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的一天搞定CSS： CSS选择器优先级--08的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定CSS：css选择器--07
- 下一篇： 一天搞定CSS： 浮动（float）及文