：目標不是前一個元素

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：

  的〜組合子分隔兩個選擇器和所述第二 元素相匹配，只有當它是由第一之前，兩者共享公共 家長。

---

#two由#one之前，這將工作：

#one:target ~ #two {}

---

#one不#two，這將不工作之前：

#two:target ~ #one {}

---

簡單地反轉在錨的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>