更多試驗(yàn)
現(xiàn)在我們?cè)囍x擇Paragraph Eight里的link O 。你將會(huì)怎么做?花一點(diǎn)時(shí)間想下再看下面介紹的方法。
我們的方法
我們的第一個(gè)方法就是把Second DIV當(dāng)做對(duì)象,然后使用兄弟選擇符鏈接四個(gè)段落選擇第四個(gè)段落,然后顯示第四個(gè)段落的鏈接,最后寫上段落的鏈接顏色代碼。
div>div>p+p+p+p a {color: red;} div>div>p+p+p+p a+a {color: blue;}
Image 4: A very narrowly defined element selection without using classes.
你們知道上面錯(cuò)在哪里了嗎?考慮下Third DIV,它的位置正好和這四個(gè)段落有關(guān)。 那就對(duì)了,四個(gè)段落都是兄弟,但是Paragraph Eight不是Paragraph Four的直接相鄰兄弟。Third DIV在它們之間必須作為兄弟考慮進(jìn)去。我可以僅僅在第三和第四個(gè)"P"選擇器之間粘貼一個(gè)DIV選擇器,但是這里有另外一個(gè)簡(jiǎn)單方法實(shí)現(xiàn)我們的目
div>div>div+p a {color: red;} div>div>div+p a+a {color: blue;}
上面的第一條語(yǔ)法指向Third DIV,然后選擇它的直系兄弟段落(Paragraph Eight),最后選擇段落里面的鏈接。“a”選擇了段落里面所有的鏈接。接著第二條語(yǔ)句讓跟隨鏈接后面的所有鏈接為藍(lán)色。所以link P的紅色鏈接變成了藍(lán)色,留下link O保持紅色。好了我知道藍(lán)色的鏈接是默認(rèn)顏色,但我們學(xué)到了方法。
讓我們最后闡明下竅門
考慮到一個(gè)元素包含很長(zhǎng)的鏈接元素和其他(我們的例子沒有提到)。如果你寫個(gè)a{color:red;},所有的鏈接都是紅色。現(xiàn)在寫 a+a {color:red;},這個(gè)結(jié)構(gòu)選擇了另外一個(gè)直系跟隨的鏈接。在我們的鏈接元素里每個(gè)鏈接都符合這樣的描述,除了第一個(gè)鏈接。不要陷入到認(rèn)為這個(gè)想法將選擇互動(dòng)鏈接。所有規(guī)則的意思是尋找和選擇擁有直系并且在它前方有鏈接的任何鏈接。明顯的除了第一個(gè)鏈接每個(gè)鏈接都是一致符合要求的。
第一個(gè)鏈接不跟隨任何級(jí)數(shù)的鏈接,所以a+a{color:red;}沒有被選擇。知道這個(gè)事實(shí),想象下在這個(gè)結(jié)構(gòu)里我們添加另外兄弟選擇符和“a”選擇器每次會(huì)發(fā)現(xiàn)什么情況。a+a+a{color:red;}排除最初的兩個(gè)鏈接,a+a+a+a{color:red}排除最初三個(gè)鏈接,等等。
所以如果你曾經(jīng)看過,或你自己使用這個(gè)選擇器竅門,僅僅只要記住這個(gè)基本規(guī)則:參加的兄弟選擇器數(shù)目等于序列里第一個(gè)被選擇的元素的位置。如果這里有8個(gè)"a"選擇器通過七個(gè)兄弟選擇符聯(lián)合,第八個(gè)鏈接和級(jí)數(shù)里剩余的所有鏈接將被選擇。因而,你可能把相同類型的一系列元素劃分為兩組,或是為后面的一組使用新樣式或是為全組更換樣式,然后再為后面的一組更換樣式,你自己選擇。
出處:藍(lán)色理想
責(zé)任編輯:moby
上一頁(yè) 詳細(xì)介紹IE7新支持的選擇器 [3] 下一頁(yè) 詳細(xì)介紹IE7新支持的選擇器 [5]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|