前端一HTML:十五: 层叠,权重,优先级的关系
生活随笔
收集整理的這篇文章主要介紹了
前端一HTML:十五: 层叠,权重,优先级的关系
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
??層疊是css的一個特性,如果兩個相同的屬性作用于同一標簽，它們會發生層疊。
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{ color: pink;}.grandson { font-style: italic;color:blue;}#grandson { 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>
?
? 如下:就是3個復合選擇器?
<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>? 如果有多個復合選擇器，同時作用于同一標簽，優先級就不好計算。這時候就要通過比較權重，來選出優先級最高的選擇器。
<!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;}#grandson{ /* 1個id選擇器 0個類選擇器 */color:brown;}</style> </head> <body><div class="father" id="father"><div class="son" id="son"><div class="grandson" id="grandson">abcdefg</div></div></div> </body> </html>?
?
層疊是css的一個特性， 如果多個選擇器同時作用于同一個標簽的同一個屬性，那么它們之間要發生層疊，這個層疊是由優先級來決定。有時候優先級不能直接通過觀察判斷出來，如果要比較優先級就要使用權重。?
總結
以上是生活随笔為你收集整理的前端一HTML:十五: 层叠,权重,优先级的关系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jvm十:类加载器解析
- 下一篇： 前端一HTML:十六: 权重有关的练习