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处理程序，理想情况下将类添加到目标，并根据该类添加样式。