时间戳

首页 > 解决方案 > 返回几个元素的父选择器

css - 返回几个元素的父选择器

问题描述

我不知道如何从具有特定标题属性的特定元素中选择一个元素（几个元素返回）。

例如，使用下面的示例代码，我试图定位第一个<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 个级别）的样式？

标签： csscss-selectorsparent

解决方案

没有办法在 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。

推荐阅读