|
試驗(yàn)
好了，讓我們?cè)囍腟econd DIV的三四兩個(gè)段落。如果我們只想使用后代選擇符可以像這樣div div p {color:red;}；問題是上面的規(guī)則影響了Second DIV所有的段落，當(dāng)然包括Third DIV的所有段落，因?yàn)門hird div在DIV里面而段落在它里面。 還使用它？后代選擇符沒有一點(diǎn)選擇性，讓很多嵌套的元素都被選擇當(dāng)我們寧愿有給小的組選擇。
的確，classes提供更好的選擇性，但我們正試著避免class-itis�？墒�，不使用任何class僅使用相鄰選擇符比較困難。IE7 以前我們使用下面的方法：
div div p {color: red;}
div div div p {color: black;}
div div p.first {color: black;}
第一個(gè)規(guī)則應(yīng)用了，然后帶有另外DIV選擇器的另外一個(gè)規(guī)則顛倒了Third DIV里的樣式。隨后阻止Paragraph Two的樣式，我們沒有選擇，只有給段落指定一個(gè)class更換樣式。真是痛苦！
通過子和兄選擇符，我們可以很簡(jiǎn)單的實(shí)現(xiàn)，不需要class。
div>div>p+p {color: red;}
div>div>div p {color: black;}
Image 3: Our new combinators have selected only Paragraphs Three and Four.
讓我們來(lái)分析下上面的代碼，第一個(gè)規(guī)則的意思是：選擇div的子部div的子部段落的相鄰兄弟段落。
Second DIV是第一DIV的子部，Second DIV里面的兩個(gè)段落即符合直接跟隨另外一個(gè)段落的要求是Paragraph Two 和 Paragraph Three。Paragraph one沒有被選中，因?yàn)樵赟econd DIV里面沒有兄弟段落在它前面。
這太棒了，但是還有一個(gè)問題。Third DIV同樣是一個(gè)DIV的子部，同樣有三個(gè)相鄰段落的子部。我們不想Paragraph Six 和 Paragraph Seven被選中，所有必須制定一個(gè)規(guī)則，第二句的意思就是：選擇div的子部div的子部div的后代段落。
對(duì)于我們測(cè)試的html，只有Third DIV里的段落適合描述的情況，所以對(duì)于目標(biāo)段落它們用黑色文本代替紅色文本。簡(jiǎn)潔明了，是不是？使用強(qiáng)大的后代、子、兄選擇符，大部分class可以從我們的頁(yè)面去除。我們也不是說(shuō)大家一定要用到這些選擇符，但是我們確信它們比單獨(dú)使用后代選擇符能夠給你帶來(lái)更多的適用性。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 詳細(xì)介紹IE7新支持的選擇器 [2] 下一頁(yè) 詳細(xì)介紹IE7新支持的選擇器 [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 
第 3 頁(yè) 詳細(xì)介紹IE7新支持的選擇器 [3]
