Question

是否有一组选择器可以让我访问以下目标：目标选择的图像？

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>

Answer 1

P.S。如果那样可以帮助缩略图列表作为最后一个元素移动到图库列表中...那么也许我可以以某种方式使用~选择器？

像#image1的兄弟姐妹一样？如果是的话，是的，这将有效。您将使用的选择器为#image1:target ~ .thumbnail-list。删除没有课程的父div，或者.thumbnail-list移动div，如果需要的话。{/ p>

但是根据您当前的结构，这是不可能的，因为.thumbnail-list是#image1和there is no parent selector的父的兄弟。

Answer 2

如果您更改HTML，则可以使用此选择器#image1:target ~ .thumbnail-list：

<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>

如何编写：目标选择器不仅仅是id

2 个答案: