选择一个锚点 (<a>) 和一个具有相同 :target 的 ID-ed div答案

【问题标题】：Select an Anchor (<a>) and an ID-ed div with the same :target选择一个锚点 (<a>) 和一个具有相同 :target 的 ID-ed div
【发布时间】：2011-06-30 15:32:43
【问题描述】：

我正在从事一个严重依赖 :target 伪类的项目。

如果<a>标签有一个名字并且这个名字是#之后的文本并且没有其他元素的id等于#之后的文本，那么a接收到:target。

这很令人困惑，所以这里有一个例子：

<style>
    * {
        color: black;
    }
    :target {
        color: red;
    }
</style>
<div id="wrapper">
    <ul>
        <li><a href="#one" name="one">one_link</a></li>
        <li><a href="#two" name="two">two_link</a></li>
        <li><a href="#three" name="three">three_link</a></li>
    </ul>
    <div id="one">div_one</div>
    <div id="two_div">div_two</div>
    <div id="three_div">div_three</div>
</div>

如果您点击“one_link”，那么“div_one”会变成红色。但是，如果你点击“two_link”或“three_link”，那么它们本身就会变成红色（因为没有带有#string的id的div，但它们有#string的名称）

我想要的是 :target 类同时在锚点和 div 上工作，或者至少是一种仅在 div 被定位时选择锚点的方法。这可能可以用 Javascript 完成，但我正在尝试使用纯 css。

【问题讨论】：

标签： css target pseudo-class

【解决方案1】：

不是纯CSS。没有办法“编程”css 来动态更改选择器以根据已单击的内容添加一些额外的文本。这超出了 CSS 的范围。这就是为什么会有 Javascript。

【讨论】：

我说的是向被点击的选择器添加文本，而不是向 dom 添加文本。例如类似#+click(source) { color: red }。 OP 希望 CSS 以某种方式将 target="#two" 上的点击变成 target="#two_div" 纯粹使用 CSS，这是不可能的。

【解决方案2】：

您可以使用div:target排除锚点选择

  * {
        color: black;
    }
    div:target{
        color: red;
    }

http://jsfiddle.net/

使用相同的技术，您可以尝试使用a:target 仅获取当前目标锚

【讨论】：

【解决方案3】：

这是不可能的。

由于您的 HTML 结构，您不能使用像 :target ~ div 这样的东西：无法选择父元素。即使这不是问题，也没有自动方法将“nth”a 映射到“nth”div。

有了更改 HTML 的许可，我想出了这个：http://jsfiddle.net/pA84B/ - 这很讨厌。

只需使用 JavaScript。

【讨论】：

【解决方案4】：

见Google: HTML, CSS, and Javascript from the Ground Up。

JavaScript 是为行为和交互而构建的。谷歌的人解释得很好（我认为），加上谷歌比我更有权威。 您应该为此使用 JavaScript。

【讨论】：