使用CSS Target突出显示父div

Question

我在我的网站中使用 Ckeditor 来插入文章。这些文章通常来自 Word 文档，并且有脚注。 在最新的 Ckeditor 版本 (7125) 中，我已经能够使用锚点从文章链接到右侧脚注。它是自动完成的。 这是第一个脚注的链接（脚注指向源）。

<a href="#_ftn1" name="_ftnref1" title="">[1]</a>

<!-- This is the footnote -->
<div id="ftn1">
  <a href="#_ftnref1" name="_ftn1" title="">[1]</a>
First footnote. I want this to be highlight...
</div>

如您所见，每个脚注都位于 div 内。 通过以下 CSS，我成功突出显示了

<a>

:

a:target { background:yellow; }

我的问题是：我怎样才能突出整个

<div>

<a>

是他的孩子？ （在示例中为“ftn1”。）

谢谢！

Answer 1

不幸的是，CSS 中没有父类型或祖先类型的选择器，因为它是浏览器性能的一个主要问题。但是，您可以使用 JQuery 轻松实现您想要的：

$("a:target").parent().css("background", "yellow");

Answer 2

你想要的都是不可能的。

因为如果 CSS 代码必须检查元素的子元素，然后必须返回到 DOM，那么速度会变得非常慢。

所以CSS中没有祖先选择器。

也许您可以控制父级并可以向其添加类（例如脚注）。

或者你可以使用 JavaScript 来做你想做的事。

Answer 3

我知道这个问题很旧，但由于我在 2024 年仍然找到它，这里有一个更新：

:has()

伪选择器类可用于访问其父元素。

div.with-link:has(> a:target) {
    background: yellow
}

请注意，在这种情况下，此方法需要您定义一个父选择器

div.with-link

。所有与此选择器匹配且其中包含目标的元素都将突出显示。

所有主流浏览器都支持此选择器。请参阅 https://caniuse.com/css-has 检查您的目标浏览器或浏览器版本是否支持。

如果这不符合您的要求，您仍然可以使用 JavaScript 替代方案。

来源：https://stackoverflow.com/a/1014958/1457596