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

【问题标题】：Can I use one target CSS selector to change two or more elements?我可以使用一个目标 CSS 选择器来更改两个或多个元素吗？
【发布时间】：2017-03-11 17:26:36
【问题描述】：

例如，我有这个：

    <!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>

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

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

好的，最终结果必须是：当我点击“设置文本颜色”链接时，第一个 p 将是蓝色，第二个 p 将是红色。作为额外的，第三个 p 将是绿色的（我很抱歉，额外的部分最初不在问题中，但我认为如果我不能处理任何兄弟元素，那会更有趣）。

【问题讨论】：

“第二个文本”是什么意思。你指的是哪个元素？
“我不想使用 JS，只有 CSS 属性”是指你“不想使用 JS，只有 CSS 属性”吗？
@TylerH 我确实提到了第二段。现在，我添加了 cmets。

标签： html css

【解决方案1】：

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

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

您可以使用通用同级选择器/组合器、~（允许您定位元素后的同级）或相邻同级组合器/选择器来做到这一点，+，用于直系兄弟姐妹。

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

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

【讨论】：

你的答案对兄弟姐妹来说很好。现在，我在我的 HTML 中添加了第三个 p，并将我的问题扩展到没有兄弟姐妹。
这根本不可能。您只能在 DOM 中选择向下或向右，而不能向上或向左选择。见stackoverflow.com/questions/1014861/…

【解决方案2】：

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

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

由于哈希 id 设置在 1:st p 上，因此无法“看到”位于 wrap 之外的 3:rd，因此我在wrap。 如果你需要更多这样的链接，你需要以同样的方式添加另一个额外的元素

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

#a:target ~ .wrap #p1 {
  color: blue;
}
#a:target ~ .wrap #p2 {
  color: red;
}
#a:target ~ #p3 {
  color: green;
}

.ta-center {
  text-align: center;
}

.wrap {
  padding: 5% 12%;
}

<div id="a"></div>

<div class="wrap">

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

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

  <p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p id="p2">Numquam quas suscipit ipsam asperiores similique blanditiis est  deleniti temporibus earum. Autem, nisi officiis atque! Libero ab error.</p>

</div>

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

【讨论】：

@Orici 更新了我的答案，所以它会按照你的要求进行
完美！！