2013-11-03 20 views
4

是否有一個選擇器組合讓我可以訪問縮略圖列表:target selected image1?我該怎麼寫一個:目標選擇器不僅僅是ID

p.s.如果這可以幫助縮略圖列表可以作爲最後一個元素移動到圖庫列表中...那麼也許我可以以某種方式使用~選擇器?

<div id="gallery-list"> 

    <div> 
     <div id="thumbnail"> <a href="#image1"><img src="image1_thumb.png"></a> </div> 
     <div id="image1" class="overlay"><img src="image1.png"></div> 
    </div> 

    <div id="I_WANT_TO_SHOW_THIS_ALONG_WITH_image1_OVERLAY" class="thumbnail-list"> 
     <img src="image1_thumb_mini.png"> 
    </div> 

</div> 
+0

我有一點點很難理解你的意思,也許顯示您當前選擇,使其一點點更容易得到你的觀點。如果我不得不猜測,我會說你想要做':target#thumbnail-list' – Breezer

+0

這是不可能的只有CSS,你可以用jQuery來做到這一點。在CSS中沒有後向,你需要將'thumbnail-list'移動到兄弟 –

+0

@Breezer我在問什麼 - 有沒有一種方法來訪問縮略圖列表:target? –

回答

4

附:如果這可以幫助縮略圖列表可以作爲最後一個元素移動到圖庫列表中...那麼也許我可以以某種方式使用~選擇器?

像是兄弟姐妹#image1?如果是這樣,那是可行的。您將使用的選擇器將是#image1:target ~ .thumbnail-list。要麼刪除沒有課程的父母div,要麼將.thumbnail-list移入該div(如果需要在那裏)。

但隨着當前的結構,這是不可能的,因爲.thumbnail-list#image1there is no parent selector的兄弟姐妹。

+0

我已經學會了沒有父母:) 而且我對結構沒有太多的瞭解 - 所以我就這麼認爲'〜'可以幫助!我會試試看〜!謝謝! –

2

你可以使用這個選擇#image1:target ~ .thumbnail-list,如果你改變你的HTML這樣的:

<div id="gallery-list"> 
    <div> 
     <div id="thumbnail"> 
      <a href="#image1"><img src="image1_thumb.png"></a> 
     </div> 

     <div id="image1" class="overlay"> 
      <img src="image1.png"> 
     </div> 

     <div id="I_WANT_TO_SHOW_THIS_ALONG_WITH_image1_OVERLAY" class="thumbnail-list"> 
     <img src="image1_thumb_mini.png"> 
     </div> 

    </div> 
</div> 
相關問題