:target 指向一个 .class 而不是 #id

Question

这是使:target 指向.class 而不是#id 的一种方法，因此它可以指向多个元素 一个用例：

<style>
section:target{height: 60px}
section p:target{color:red}
</style>

    <div class="menu">
    <nav><a href="#foo">Collapse me</a></nav>
    <nav><a href="#bar" >Change my color</a></nav>
        <section id="foo">
            <p id="bar">hop</p>
        </section>
</div>

<div class="menu">
    <nav><a href="#baz">Collapse me</a></nav>
    <nav><a href="#boo">Change my color</a></nav>
        <section id="baz">
        <p id="boo">la</p>
        </section>
    </div>

想象它会起作用，然后你可以在菜单中制作著名的“我在这里”，折叠页面并显示用户在哪里是在同时，所以想象一下，例如，你制作一张图片，然后你输入opacity:0然后在使用目标时你让值是opacity:1

Answer 1

这是不可能的，而且:target 伪类的使用方式并非如此。

URL 中的锚片段一次只能指向一个标识符，因此即使 :target 确实查看了类，您也不能一次将样式应用于给定类的多个元素.这就是为什么锚片段对应于 ID，而不是类。

如果您需要定位多个元素，您应该使用其他 CSS 选择器甚至 JavaScript。