Question

是否可以使用:target CSS选择器来影响另一个DIV？例如，当用户访问http://website.com/#button时，如果元素的结构如下，则可以设置.photo元素的样式吗？

<div class="gallery">
  <ul>
   <li class="photo">
   <li class="photo">
  </ul>
<div>
<div id="button">Button Text</div>

Answer 1

:target检查网址的哈希部分，并在元素上查找匹配id。所以是的，你可以影响另一个元素，但它需要一个与当前哈希部分匹配的id。这是一个例子http://jsfiddle.net/Tetaxa/egF3d/

Answer 2

您可以影响多个元素，但它们都必须与作为目标的元素相关。最简单的方法是将id放在包装元素上：

<div id="gallery1">
    <div class="gallery">
      <ul>
          <li class="photo">Photo</li>
          <li class="photo">Photo</li>
      </ul>
    </div>
</div>
<div id="gallery2">
    <div class="gallery">
      <ul>
          <li class="photo">Photo</li>
          <li class="photo">Photo</li>
      </ul>
    </div>
</div>
<a href="#gallery1">Gallery 1</a>|<a href="#gallery2">Gallery 2</a>

然后你可以有这样的规则：

.gallery {
    //rules for when gallery is not the target
}
:target .gallery {
    //rules for when the gallery is the target
}

Here's an example

使用：target选择器来影响不相关的DIV（没有Javascript）？

2 个答案: