CSS 用于属性的父选择器

Question

我想根据父元素的子属性隐藏父元素<li>：

这个问题不能解决我的问题：是否有 CSS 父选择器？

我的网页：

<li class="tools-item"></li>
<li class="tools-item"></li>
<li class="tools-item">
<a href="/modules/chk/" data-identity="extensionButton_9_2" class="tool-block">
<span class="tool-icon">
<img src="/modules/chk/images/button.png" alt=""></span>
<span class="tool-name">Modules name</span>
</a>
<span class="tooltipData">Modules details</span>
</li>
<li class="tools-item"></li>
<li class="tools-item"></li>

想要根据以下内容隐藏父级：data-identity="extensionButton_9_2"

我的 CSS：

为属性工作：

[data-identity="extensionButton_9_2"]{
display: none !important;
} 

对父级不起作用的 css：

[data-identity="extensionButton_9_2"]:parent {
display: none !important;
}
li:has(> [data-identity="extensionButton_9_2"]) {
display: none !important;    
}

请帮忙。 谢谢

Answer 1

您可以使用:has()伪选择器，尽管浏览器支持有限。在解决此问题之前，您可以使用 polyfill。

li:has(a[data-identity="extensionButton_9_2"]) {
display: none;
}

<li class="tools-item"></li>
<li class="tools-item"></li>
<li class="tools-item">
<a href="/modules/chk/" data-identity="extensionButton_9_2" class="tool-block">
<span class="tool-icon">
<img src="/modules/chk/images/button.png" alt=""></span>
<span class="tool-name">Modules name</span>
</a>
<span class="tooltipData">Modules details</span>
</li>
<li class="tools-item"></li>
<li class="tools-item"></li>

Answer 2

在这种特殊情况下，解决方案不需要父选择器，因为违规li中的所有内容都可以用 CSS 隐藏，然后li就会折叠(只要你不使用常规的列表样式类型(。

li {
list-style-type: none;
position: relative;
}
li::before {
position: absolute;
left: -1em;
content: '2022';
}
[data-identity='extensionButton_9_2'],
[data-identity='extensionButton_9_2']~* {
display: none;
}

<ul>
<li class="tools-item">one</li>
<li class="tools-item">two</li>
<li class="tools-item">
<a href="/modules/chk/" data-identity="extensionButton_9_2" class="tool-block">
<span class="tool-icon">
<img src="/modules/chk/images/button.png" alt=""></span>
<span class="tool-name">Modules name</span>
</a>
<span class="tooltipData">Modules details</span>
</li>
<li class="tools-item">four</li>
<li class="tools-item">five</li>
</ul>

当然，如果情况更复杂(例如，如果在a之前li中有内容(，那么找到仅 css 的解决方案将变得更加困难！