css - 基于 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 }

score 3 · Accepted Answer

3

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

于 2013-07-25T15:49:32.953 回答

score 0 · Accepted Answer

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

score 0 · Accepted Answer

你的<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处理程序，理想情况下将类添加到目标并基于该类进行样式设置。

3 回答 3