几个元素的父选择器返回[重复]

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> 元素（或至少后两层）的样式？

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 的 DOM 有多高，您可能需要递归调用 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>