前端一HTML:十五: 层叠,权重,优先级的关系
生活随笔
收集整理的這篇文章主要介紹了
前端一HTML:十五: 层叠,权重,优先级的关系
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
??層疊是css的一個特性,如果兩個相同的屬性作用于同一標(biāo)簽，它們會發(fā)生層疊。
<!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個復(fù)合選擇器?
<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>? 如果有多個復(fù)合選擇器，同時作用于同一標(biāo)簽，優(yōu)先級就不好計算。這時候就要通過比較權(quán)重，來選出優(yōu)先級最高的選擇器。
<!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;}#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的一個特性， 如果多個選擇器同時作用于同一個標(biāo)簽的同一個屬性，那么它們之間要發(fā)生層疊，這個層疊是由優(yōu)先級來決定。有時候優(yōu)先級不能直接通過觀察判斷出來，如果要比較優(yōu)先級就要使用權(quán)重。?
總結(jié)
以上是生活随笔為你收集整理的前端一HTML:十五: 层叠,权重,优先级的关系的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jvm十:类加载器解析
- 下一篇： oracle 函数to_char(数据,