前端 CSS层叠性 CSS选择器优先级
生活随笔
收集整理的這篇文章主要介紹了
前端 CSS层叠性 CSS选择器优先级
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?
?
層疊性
層疊性：權(quán)重的標簽覆蓋掉了權(quán)重小的標簽，說白了 ，就是被干掉了
權(quán)重：誰的權(quán)重大，瀏覽器就會顯示誰的屬性
?
我們現(xiàn)在已經(jīng)學過了很多的選擇器，也就是說在一個HTML頁面中有很多種方式找到一個元素并且為其設置樣式，那么就會有一個問題：如果我通過不同的選擇器找到了相同的一個元素，并且設置了不同的樣式，那么瀏覽器究竟應該按照哪一個樣式渲染呢？也就是不同的選擇器它們的優(yōu)先級是怎樣的呢？
其實是按照不同選擇器的權(quán)重來決定的，具體的選擇器權(quán)重計算方式如下圖：
?
?
?
類選擇器權(quán)重大于標簽選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><style>p{color: red;font-size: 30px;}.spe1{color: yellow;font-size: 40px;}</style> </head> <body><div><p class="spe1">我是什么顏色</p><p class="spe1">我是什么顏色</p></div> </body> </html>?
?
?當權(quán)重一樣的時候 是以后來設置的屬性為準，前提必須權(quán)重一樣 。‘后來者居上 ’。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><style>.spe1{color: yellow;font-size: 40px;}.spe2{color: green;font-size: 40px;}</style> </head> <body><div><p class="spe1 spe2">我是什么顏色</p><p class="spe1 spe2">我是什么顏色</p></div> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/mingerlcm/p/10803628.html
總結(jié)
以上是生活随笔為你收集整理的前端 CSS层叠性 CSS选择器优先级的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL中的函数
- 下一篇： 希特勒为什么在自杀前才跟爱娃结婚？