基于a:target的CSS选择器

Question

这是我的HTML代码：

<p class="define"><a class="term" href="#jump" name="jump">jump</a> - Some description</p>

当浏览器跳转到#jump时，我希望突出显示.define类。如果我这样做；

a.term:target { background-color: #ffa; -webkit-transition: all 1s linear; }

当然，我只突出显示a。如何修改以完成p？我尝试了一些变体，例如下面的代码，但它们都不起作用。

a.term:target .define { 在这里插入内容 }

a.term:target p.define { 在这里插入内容 }

a.term:target p { 在这里插入内容 }

jsFiddle：http://jsfiddle.net/vVPPy/

- DNN

---

好问题，除了JS之外没有好的答案，如果CSS选择器可以像xpath一样使用“../”就好了...或者也许不行？ - Ruan Mendes

Answer 1

你不能使用CSS修改元素的父级。你需要使用JavaScript替代方法。

- DickieBoy

---

JS的替代方案是使用事件委托安装mouseover/mouseout处理程序。 - Ruan Mendes

Answer 2

你的 <p> 标签并没有被任何东西所指定。如果它被指定了：

<p class="define" id="something">
   <a class="term" href="#something" name="jump">jump</a> - blah
</p>

你可以这样设置样式：

a.term:target { background-color: #ffa; }

但这与实际点击 <a> 标签无关。您需要使用一个 onclick 处理程序，并为目标添加一个类，根据该类进行样式设置。

- Paul Roub

---

请注意，如果用户击打 www.domain.com/page.html#something 而不是点击链接，则 :target 将无法工作。 - Wex

Answer 3

使用 CSS 无法确定用户在页面上的位置。这可以通过 JavaScript 实现 - 如果您不想重复造轮子，我建议使用 Bootstrap 的 ScrollSpy。

- Wex