Question

我正在研究一个严重依赖于:target psuedo-class的项目。

如果<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”，那么它们本身会变为红色（因为没有带＃字符串id的div，但它们的名称为＃string）

我想要的是：目标类同时处理锚点和div，或者至少只有在div被定位时才选择锚点。这可以用Javascript完成，但我正在尝试使用纯CSS。

Answer 1

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

Answer 2

您可以使用div:target

排除锚点选择

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

http://jsfiddle.net/

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

Answer 3

这不太可能。

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

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

只需使用JavaScript。

Answer 4

请参阅Google: HTML, CSS, and Javascript from the Ground Up 。

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

选择锚点<a>) and an ID-ed div with the same :target</a>

4 个答案: