前端 CSS层叠性 CSS选择器优先级
生活随笔
收集整理的這篇文章主要介紹了
前端 CSS层叠性 CSS选择器优先级
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
?
層疊性
層疊性：權(quán)重的標(biāo)簽覆蓋掉了權(quán)重小的標(biāo)簽，說(shuō)白了 ，就是被干掉了
權(quán)重：誰(shuí)的權(quán)重大，瀏覽器就會(huì)顯示誰(shuí)的屬性
?
我們現(xiàn)在已經(jīng)學(xué)過(guò)了很多的選擇器，也就是說(shuō)在一個(gè)HTML頁(yè)面中有很多種方式找到一個(gè)元素并且為其設(shè)置樣式，那么就會(huì)有一個(gè)問(wèn)題：如果我通過(guò)不同的選擇器找到了相同的一個(gè)元素，并且設(shè)置了不同的樣式，那么瀏覽器究竟應(yīng)該按照哪一個(gè)樣式渲染呢？也就是不同的選擇器它們的優(yōu)先級(jí)是怎樣的呢？
其實(shí)是按照不同選擇器的權(quán)重來(lái)決定的，具體的選擇器權(quán)重計(jì)算方式如下圖：
?
?
?
類選擇器權(quán)重大于標(biāo)簽選擇器
<!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>?
?
?當(dāng)權(quán)重一樣的時(shí)候 是以后來(lái)設(shè)置的屬性為準(zhǔn)，前提必須權(quán)重一樣 ?！髞?lái)者居上 ’。
<!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选择器优先级的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： MySQL中的函数
- 下一篇： 希特勒为什么在自杀前才跟爱娃结婚？