选择一个锚点 () 和一个具有相同 :target 的 ID-ed div
我正在开发一个严重依赖 :target psuedo 类的项目。
如果 标记有一个名称，并且该名称是 # 后面的文本，并且没有其他元素的 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，但它们具有 # 字符串的名称
）想要的是 :target 类同时作用于锚点和 div，或者至少是一种仅在 div 被定位时选择锚点的方法。这可能可以用 Javascript 来完成，但我正在尝试使用纯 css。
I'm woking on a project that heavily relies on the :target psuedo-class.
If the <a> tag has a name and that name is the text after the # and there is no other element with an id equal to the text after the #, then the a receives the :target.
That was confusing, so here's an example:
<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>
If you were to click on the "one_link," then "div_one" would turn red. However, if you were to click on "two_link" or "three_link," then they themselves would turn red (because there isn't a div with the id of the # string, but they have the name of the # string)
What I want is for the :target class to work on both the anchor and the div, or at least a way to select the anchor only when the div is targeted. This can probably be done with Javascript, but I'm trying to use pure css.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
不是纯CSS。没有办法“编程”CSS来动态更改选择器以根据单击的内容添加一些额外的文本。这超出了 CSS 的范围。这就是 Javascript 出现的原因。
Not in pure css. There's no way to "program" css to dynamically change a selector to add some extra text based on something that's been clicked. That's waaaay outside the scope of CSS. That's why there's Javascript.
您可以使用
div:targethttp://jsfiddle.net/
排除锚点选择使用相同的技术，您可以尝试使用
a:target来仅获取当前目标锚点You can exclude the anchor selection by using
div:targethttp://jsfiddle.net/
With the same technique you can try with
a:targetto get only the current targeted anchor这实际上是不可能的。
由于 HTML 结构的原因，您不能使用类似
:target ~ div的内容：无法选择父元素。即使这不是问题，也没有自动方法将“nth”a映射到“nth”div。有了更改 HTML 的许可证，我想出了这个： http://jsfiddle.net/pA84B/ -这很糟糕。
只需使用 JavaScript 即可。
That's not really possible.
You can't use anything like
:target ~ div, because of your HTML structure: there is no way to select a parent element. Even if that wasn't a problem, there's no automatic way to map "nth"ato "nth"div.With license to change the HTML, I came up with this: http://jsfiddle.net/pA84B/ - it's nasty.
Just use JavaScript.
请参阅 Google：从头开始 HTML、CSS 和 Javascript。
JavaScript 是为行为和交互而构建的。谷歌的人解释得很好（我认为），而且谷歌比我更权威一点。 您应该为此使用JavaScript。
See Google: HTML, CSS, and Javascript from the Ground Up.
JavaScript is built for behavior and interaction. The Google guys explain it well (I think), plus Google is a bit more authoritative than me. You should use JavaScript for this.