如何隐藏包含特定title属性超链接的<li>元素？

你当前的CSS代码只隐藏了<a>元素，但父级<li>仍然保留，导致页面出现空白区域。要隐藏整个<li>，可以采用以下两种方案：

方案一：使用CSS :has() 伪类（现代浏览器推荐） #

:has() 伪类可以直接选择包含特定子元素的父元素，语法简洁高效：

ul > li:has(a[title^="xx"]) {
  display: none;
}

这个规则会选中所有包含title属性以xx开头的<a>的<li>，并将整个列表项完全隐藏。

方案二：使用JavaScript（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器（比如IE），可以通过JS遍历目标元素并隐藏其父级<li>：

// 找到所有符合条件的<a>元素
const targetLinks = document.querySelectorAll('ul > li > a[title^="xx"]');

// 遍历每个<a>，隐藏它所在的<li>
targetLinks.forEach(link => {
  const parentLi = link.closest('li');
  if (parentLi) {
    parentLi.style.display = 'none';
  }
});

内容的提问来源于stack exchange，提问作者roadlink