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