Question

我有这样的例子：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS - Selector :target</title>

        <style type="text/css">

            #a:target {
                color:blue;
            }

            .ta-center { text-align: center; }
            .wrap { padding: 5% 12%; }

        </style>
    </head>
    <body>

    <div class="wrap">

        <h1 class="ta-center">CSS - Selector :target</h1>

        <a href="#a">Sets texts in color</a> | 
        <a href="#">Reset</a>

        <!-- first text -->
        <p id="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>

        <!-- second text -->
        <p id="b">Numquam quas suscipit ipsam asperiores similique blanditiis est deleniti temporibus earum. Autem, nisi officiis atque! Libero ab error.</p>
    </div>

    <!-- third text -->
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

</body>
</html>

如何使用链接将颜色更改为第二个文本（p，ID为“b”），例如更改为红色？

我不想使用JS，只使用CSS属性，并且更愿意知道我是否可以专门为此使用“目标”，或者是不可能的，并且需要另一种方式。

好的，最终结果必须是：当我点击“设置彩色文字”链接时，第一个p 将为蓝色，第二个p 将为红色。另外，第三个p 将是绿色的（对不起，额外的部分原本不在问题中，但我认为如果我不能处理任何兄弟元素那就更有趣了。）< / p>

Answer 1

当我点击“设置彩色文本”链接时，第一个p将为蓝色，第二个p将是红色的。另外，第三个p将是绿色

要完成这项工作，您需要将哈希id目标移动到能够“看到”所有其他目标的元素。

由于哈希id设置在1：st $publications = [ "media1" => "link", "media2" => "link" ] if (array_key_exists($_POST["publication"], $publications)) { echo '<a href="' . $publications[$_POST["publication"]] . '">' . htmlspecialchars($_POST["publication"]) . '</a>'; }上，因为它在p之外，因此无法“看到”3：rd，我创建了一个额外的{在wrap之前{1}}。 如果你需要更多像这样工作的链接，你需要以同样的方式添加另外一个元素

现在，通过使用general sibling selector div和descendant combinator wrap（空格），现在可以定位任何元素。

Answer 2

如何使用链接将颜色更改为第二个文本，例如蓝色？我不想使用JS，只使用CSS属性，并且更愿意知道我是否可以专门为此使用“目标”

您的意思是，当点击引用#a的链接时，您也希望更改第二段的颜色，但使用不同的颜色？

你可以使用通用兄弟选择器/组合器，~来实现这一点，它可以让你在一个元素之后定位兄弟姐妹，或者相邻兄弟组合子/选择器，+，对于直接的兄弟姐妹。

#b是#a的后续兄弟，因此，当#a是当前目标时，您可以使用

#a:target ~ #b { /* or here specifically: #a:target + #b */
  color:red;
}

我可以使用一个目标CSS选择器来更改两个或更多元素吗？

2 个答案: