我想隐藏父元素<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;
}
请帮忙。 谢谢
最佳答案
虽然浏览器支持 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>
关于属性父选择器的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58093014/