Question

您好我正在使用目标方法来操作不同的div样式，因为第一个“link_one”一切正常，而我只有一个链接，问题是如何让它适用于“link_two”？那么link_two会做css的第二部分吗？更重要的是，每个链接都是maniluplating 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;
}

使用目标方法定位不同的div样式

1 个答案:

fiddle