武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介:什么是CSS指針?這里指針是指屬于與被屬于的關(guān)系 如.yangshi .yangshi_a{...}
什么是CSS指針?這里指針是指屬于與被屬于的關(guān)系 如.yangshi .yangshi_a{...}
對(duì)于yangshi_a是yangshi 指向的樣式
我們可以作1個(gè)實(shí)驗(yàn)來(lái)理解此CSS 指針 是什么
原CSS div樣式
.yangshi{ width:300px; height:50px; border:1px solid #F00; margin:0 auto; text-align:right;}
.yangshi .yangshi_a{ float:left; width:30px; border:1px dashed #333;}
.yangshi .yangshi_b{ float:right; width:50px; border:1px dashed #333;}
<div class="yangshi">
< div class="yangshi_a">內(nèi)容a</div>
< div class="yangshi_b">內(nèi)容b</div>
< /div>
< div class="clear"><img src="images/s.gif" /></div>
瀏覽器顯示結(jié)果:
就我們以上實(shí)例來(lái)做
我們將.yangshi .yangshi_b{...} 改為.yangshic .yangshi_b{...}
得到 .yangshic .yangshi_b{ float:right; width:50px; border:1px dashed #333;}
然后你瀏覽下結(jié)果
CSS指針效果
是的 是不是感覺(jué)yangshi_b雖然我們 在DIV使用class調(diào)用了但是失效了
怎么多中間的虛線了
那就是因?yàn)镈IV獨(dú)占一行的特性出來(lái)了
而<div class="yangshi_b">內(nèi)容b</div> 失效了
當(dāng)然你會(huì)看到
是的 是因?yàn)镃SS指針屬性,看到改后yangshi_b可以理解父級(jí)(yangshic)不存在(或html中改后yangshi_b父級(jí)是yangshi而不是yangshic所以為導(dǎo)致yangshic指針到y(tǒng)angshi_b的樣式失敗)
這個(gè)CSS指針我們可以很好利用
比如以后我們統(tǒng)一命名 比如在一個(gè)網(wǎng)頁(yè)中很多欄目標(biāo)題我們就以.titles命名 我們可以利用CSS指針給他賦予不同父級(jí) 在不同地方使用并賦予不同CSS樣式,利用這一特點(diǎn) 讓我們維護(hù)更加容易,一看此命名就知道此處是某欄目標(biāo)題意思
|
新聞熱點(diǎn)
疑難解答
圖片精選