返回多个元素的父选择器

Question

我无法弄清楚如何从具有特定标题属性的特定元素中选择一个元素(几个元素(。

例如，使用以下示例代码，我正在尝试针对第一个<renderer>元素...

<renderer class="scope">
<div id="content" class="scope">
<renderer class="scope">
<div class="scope">
<div id="details" class="scope">
<a title="Foo Bar" href="#">LINK TEXT</a>
</div>
</div>
</renderer>
</div>
</renderer>

我已经尝试了许多变化，包括这个...

renderer:has a[title*="Foo Bar"] {
opacity: 0.2 !important;
}

我尝试过的其他事情甚至也没有接近工作(甚至是JavaScript(......但可能是因为我在这里或其他网站上找到的每个答案都与这个问题无关，不足以解决问题。

如果链接标题中包含特定文本，如何定位和设置第一个<renderer>元素(或至少 2 级(的样式？

Answer 1

无法在 CSS 中选择父元素。您可以使用javascript来实现所需的结果。

你可以做这样的事情

let anchor = document.querySelector('a[title="Foo Bar"]');
anchor.closest('renderer').style.opacity = 0.2;

如果要选择文档中的所有元素，可以使用 querySelectorAll，如下所示：

let anchors = document.querySelectorAll('a[title="Foo Bar"]');
anchors.forEach(function (anchor) {
anchor.closest('renderer').style.opacity = 0.2;
});

注意：closest(( 在 IE 中不起作用，因此您可能需要添加其 polyfill 或使用 parentNode。

Answer 2

截至 2020 年 2 月，任何浏览器目前都不支持 ：has CSS 伪类。

---

JS解决方案

如果你不确定你的renderer有多高，你可能需要递归调用 Element.closest(( 才能找到它。

function getHighestRenderer(el) {
const closestRenderer = el.parentNode.closest("renderer");
if (closestRenderer) {
return getHighestRenderer(closestRenderer);
}
return el;
}
const titleToMatch = "Foo Bar";
const detailsLinks = document.querySelectorAll(".details a");
detailsLinks.forEach(link => {
if (titleToMatch === link.getAttribute("title")) {
getHighestRenderer(link).classList.add("foobar");
}
});

.foobar {
border: 1px dotted blue;
padding: 10px;
display: block;
}

<renderer class="scope">
<div id="content" class="scope">
<renderer class="scope">
<div class="scope">
<div id="" class="details scope">
<a title="Not Foo Bar" href="#">LINK TEXT  - title: Not Foo Bar</a>
</div>
</div>
</renderer>
</div>
</renderer>
<renderer class="scope">
<div id="content" class="scope">
<renderer class="scope">
<div class="scope">
<div id="" class="details scope">
<a title="Not Foo Bar" href="#">LINK TEXT - title: Not Foo Bar</a>
</div>
</div>
</renderer>
</div>
</renderer>
<renderer class="scope">
<div id="content" class="scope">
<renderer class="scope">
<div class="scope">
<div id="" class="details scope">
<a title="Foo Bar" href="#">LINK TEXT - title: Foo Bar</a>
</div>
</div>
</renderer>
</div>
</renderer>