前端一HTML:十五: 权重的比较
生活随笔
收集整理的這篇文章主要介紹了
前端一HTML:十五: 权重的比较
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?如果選擇器混合使用,那么如何確定我們的優先級?
? ? ? 通過權重進行比較. ?那么如何計算權重呢? 通過數標簽來計算。 先數id選擇器的個數,再數類選擇器的個數,最后數標簽選擇器的個數.? ?
? ? ? ? ? ? id選擇器個數不相等,那么個數多的權重就大,如果個數相等就比較類選擇器個數是否相等(個數多的, 權重就大)，最后比較標簽選擇器個數是否相等(個數多的, 權重就大).
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#father .son div{ /* 1個id選擇器, 1個類選擇器 1個標簽選擇器*/color: pink;}#father .son .grandson{ /* 1個id選擇器, 2個類選擇器 通過比較, 此混合選擇器權重最大 */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>?
注意:
? ? ? ? 比較權重的時候一定要注意,我們的選擇器一定要命中對應的選擇器才可能讓標簽擁有對應的屬性.
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#father .son div{ /* 1個id選擇器, 1個類選擇器 1個標簽選擇器*/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>?
總結
以上是生活随笔為你收集整理的前端一HTML:十五: 权重的比较的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端一HTML:十四: importan
- 下一篇： 前端一HTML:十五: 层叠,权重,优先