您好,我正在使用目标方法来操作不同的 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;
}
最佳答案
应用目标选择器的一种方法是:
对于这个 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
关于html - 使用 target 方法定位不同的 div 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21486222/