Html ：目标不在上一个元素上工作

我有两张照片

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

• : ~combinator分隔两个选择器并匹配第二个选择器 元素，前提是它前面有第一个，并且两者共享一个公共 家长

---

#两个

前面是

#一个

，这将起作用：

#一：目标~#二{}

---

#一

前面没有

#二

，这将不起作用：

#二：目标~#一{}

---

只需反转锚点的

href

属性中的片段标识符值，并删除常规同级选择器

#一：目标{
变换：透视（600px）旋转（-355deg）；
}
#二：目标{
变换：透视（600px）旋转（-355deg）；
}

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