前端一HTML:十六: 权重有关的练习
生活随笔
收集整理的這篇文章主要介紹了
前端一HTML:十六: 权重有关的练习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
練習一:?
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="keywords" content="權重,練習"><meta name="description" content="對網站的描述"><title>第1題</title><style type="text/css">#father #son{ color:blue; /* 權重: 2個id選擇器 0個類選擇器*/}#father p.c2{color:black; /* 權重: 1個id選擇器 1個類選擇器 1個標簽選擇器*/}div.c1 p.c2{ color:red; /* 權重: 0個id選擇器 2個類選擇器 2個標簽選擇器*/}#father{color:green !important; /* 沒有命中到p標簽 */}div#father.c1{color:yellow; /* 沒有命中到p標簽 */}</style> </head> <body><div id="father" class="c1">div內容<p id="son" class="c2">p標簽內容</p></div> </body> </html>練習2:?
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>第2題</title><style type="text/css">#father{color:red;}p{color:blue;}</style> </head> <body><div id="father"><p>p標簽文本</p></div> </body> </html>練習3:?
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>第3題</title><style type="text/css">div p{color:yellow;}#father{color:red;}p.c2{color:blue;}</style> </head> <body><div id="father" class="c1"><p class="c2">p標簽文本</p></div> </body> </html>練習4:??
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>第4題</title><style type="text/css">div div{color:yellow; /* 權重: 0個id選擇器 0個類選擇器 2個標簽選擇器*/}/* 標簽是從右向左找 */div{color:red; /* 權重: 0個id選擇器 0個類選擇器 1個標簽選擇器*/}</style> </head> <body><div><div><div>多層div包含的文本...</div></div></div> </body> </html>練習5:???
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>第5題</title><style type="text/css">div div div div div div div div div div div div {color:yellow; /* 權重: 0個id選擇器 0個類選擇器 12個標簽選擇器*/}.haha{color:blue; /* 權重: 0個id選擇器 1個類選擇器 12個標簽選擇器*/}</style> </head> <body><div><div><div><div><div><div><div><div><div><div><div><div class="haha">很多層div包含的文本</div></div></div></div></div></div></div></div></div></div></div></div> </body> </html>練習6:????
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>第6題</title><style type="text/css">.c1 .c2 div{color:blue ; /* 權重: 0個id選擇器 2個類選擇器 1個標簽選擇器*/}div #box3{color:green ; /* 權重: 1個id選擇器 0個類選擇器 1個標簽選擇器*/}#box1 div{color:yellow ; /* 權重: 1個id選擇器 0個類選擇器 1個標簽選擇器 */}</style> </head> <body><div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">哈哈哈 </div></div></div> </body> </html>?
總結
以上是生活随笔為你收集整理的前端一HTML:十六: 权重有关的练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python六十: __doc__属性
- 下一篇： TCP和UDP是否可以绑定同一端口进行通