html - 使用 target 方法定位不同的 div 样式

Question

您好，我正在使用目标方法来操作不同的 div 样式，对于第一个“link_one”，一切正常，而我只有一个链接，问题是如何使其适用于“link_two”？那么 link_two 将完成 css 的第二部分？这里更重要的是每个链接都在操纵 2 个不同的类，其中链接一和两个类中的一个是相同的。

<a href="#sections">link_one</a>

<div id="sections">
<div id="link_one">info</div>
<div id="link_two">info</div>
</div>

/* link one code */ 
    #sections:target #link_one{
        height:90px;
        background:#333;
        transition:all 1s ease;
    }

    #sections:target .rslides {
        height:0px;
        transition:all 1s ease;
    }

/* link two code */ 
  #sections:target #link_two{
        height:90px;
        background:#333;
        transition:all 1s ease;
    }

    #sections:target .rslides {
        height:0px;
        transition:all 1s ease;
    }

Answer 1

应用目标选择器的一种方法是:

对于这个 HTML

<a href="#sections1">link_one</a>
<br>
<a href="#sections2">link_two</a>

<div id="sections1"></div>
<div id="sections2"></div>
<div id="link_one" class="link">info</div>
<div id="link_two" class="link">info</div>

设置这个 CSS

 .link {
    height: 20px;
    transition:all 1s ease;
}

#sections1:target ~ #link_one{
    height:90px;
    background:#333;
}

#sections2:target ~ #link_two{
    height:90px;
    background:#333;
}

fiddle