基于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 { stuff here }

a.term:target p.define { stuff here }

a.term:target p { stuff here }

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

Answer 1

您无法使用css修改元素的父级。您将不得不使用javascript替代方案。

Answer 2

您将无法使用CSS确定用户在页面上的位置。这可以通过JavaScript完成 - 如果你不想重新发明轮子，我建议使用Bootstrap的ScrollSpy。

Answer 3

您的<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处理程序，理想情况是为目标添加一个类，并根据该类设置样式。