html - :target not working on previous element

Question

我有两张图片

<div class = "main-container">
        <div  class="img" id = "one">
            <a href="#one"><img src="1.jpg" ></a>
        </div>

        <div class="img" id = "two">
            <a href="#two"><img src="2.jpg"></a>
        </div>
</div>

当我点击第一张图片时，第二张图片应该旋转并且它正在工作，但是当点击第二张图片时，第一张图片不旋转，但是它到达了它的初始位置。仅使用了 css:

#one:target ~ #two{
    transform: perspective( 600px ) rotateY( -355deg );
}
#two:target ~ #one{
    transform: perspective( 600px ) rotateY( -355deg );
}

Answer 1

• General sibling selector :

  The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

---

#two 前面有 #one，这将起作用:

#one:target ~ #two {}

---

#one 前面没有 #two，这将不起作用:

#two:target ~ #one {}

---

只需反转 anchor 的 href 属性中的片段标识符值并删除一般的兄弟选择器。

#one:target {
  transform: perspective(600px) rotateY(-355deg);
}
#two:target {
  transform: perspective(600px) rotateY(-355deg);
}

<div class="main-container">
  <div class="img" id="one">
    <a href="#two">
      <img src="http://placehold.it/50x50">
    </a>
  </div>

  <div class="img" id="two">
    <a href="#one">
      <img src="http://placehold.it/50x50">
    </a>
  </div>
</div>