前端一HTML:十五: 权重的比较
生活随笔
收集整理的這篇文章主要介紹了
前端一HTML:十五: 权重的比较
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?如果選擇器混合使用,那么如何確定我們的優(yōu)先級?
? ? ? 通過權(quán)重進行比較. ?那么如何計算權(quán)重呢? 通過數(shù)標(biāo)簽來計算。 先數(shù)id選擇器的個數(shù),再數(shù)類選擇器的個數(shù),最后數(shù)標(biāo)簽選擇器的個數(shù).? ?
? ? ? ? ? ? id選擇器個數(shù)不相等,那么個數(shù)多的權(quán)重就大,如果個數(shù)相等就比較類選擇器個數(shù)是否相等(個數(shù)多的, 權(quán)重就大)，最后比較標(biāo)簽選擇器個數(shù)是否相等(個數(shù)多的, 權(quán)重就大).
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#father .son div{ /* 1個id選擇器, 1個類選擇器 1個標(biāo)簽選擇器*/color: pink;}#father .son .grandson{ /* 1個id選擇器, 2個類選擇器 通過比較, 此混合選擇器權(quán)重最大 */font-style: italic;color:blue;}#grandson{ /* 1個id選擇器 */color:red;}</style> </head> <body><div class="father" id="father"><div class="son" id="son"><div class="grandson" id="grandson">abcdefg</div></div></div> </body> </html>?
注意:
? ? ? ? 比較權(quán)重的時候一定要注意,我們的選擇器一定要命中對應(yīng)的選擇器才可能讓標(biāo)簽擁有對應(yīng)的屬性.
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#father .son div{ /* 1個id選擇器, 1個類選擇器 1個標(biāo)簽選擇器*/color: pink;}#father .son { /* 1個id選擇器, 2個類選擇器 但是沒有直接命中 "abcdefg" */font-style: italic;color:blue;}.father .son .grandson{ /* 0個id選擇器, 3個類選擇器 */color:red;}</style> </head> <body><div class="father" id="father"><div class="son" id="son"><div class="grandson" id="grandson">abcdefg</div></div></div> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的前端一HTML:十五: 权重的比较的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端一HTML:十四: importan
- 下一篇： python五十九: slots属性