属性父选择器的CSS

Question

我想隐藏父元素<li>根据其子属性:

这个问题没有解决我的问题:Is there a CSS parent selector?

我的 HTML:

<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;
} 

不为 parent 工作的CSS:

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

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

请帮忙。谢谢

Answer 1

虽然浏览器支持 limited，但您可以使用 :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>