如何在 CSS 中选择包含具有给定属性的子元素的元素？

我正在尝试编写一个用户脚本，该用户脚本选择包含带有 [is 的元素的

元素-dismissed] 属性作为直接子级。

<div> <!-- do not select this -->
    <div> <!-- do not select this -->
        <ytd-rich-grid-media>
        </ytd-rich-grid-media>
    </div>
    <div> <!-- DO select this -->
        <ytd-rich-grid-media is-dismissed>
        </ytd-rich-grid-media>
    </div>
</div>

环境支持按属性选择；此用户脚本能够选择目标元素的子元素：

ytd-rich-grid-media[is-dismissed]  {
    
    display: none !important;
    
}

该环境还支持 :has() 选择器；该脚本能够选择包含的

（无论属性或继承深度如何）。

div:has(ytd-rich-grid-media) {
    
    display: none !important;
    
}

最后，环境支持 > 子选择器；此脚本能够选择

的直接子元素元素：

div > ytd-rich-grid-media {
    
    display: none !important;
    
}

但是，当我尝试将 :has() 选择器与其他任何工具结合起来时，一切都崩溃了。我希望我正在寻找的 CSS 看起来像这样：

div:has(> ytd-rich-grid-media[is-dismissed] ) {
    
    display: none !important;
    
}

但是，这会在 Opera 上的 Stylus 中返回错误。第一个错误是预期 RPAREN 但发现 '>'。；如果作为诊断步骤删除 >，则第一个错误将改为 Expected RPAREN but found '['.。如果我删除 [is-dismissed]，第一个错误仍然存在。

虽然我无法找到任何关于 :has() 是否可以支持具有属性选择器的子项的信息，但我发现了一些资料（包括这个）表明> 选择器应该与 :has() 一起正常工作。这是一个实现错误（在 Opera 和/或 Stylus 中）、不受支持的 CSS 选择器组合（无论是在 Opera 中还是在整个 CSS 中）、我在组装这些选择器时的错误，还是其他原因？

P粉170438285485 天前647

全部回复(1)我来回复

P粉4045397322023-09-09 11:10:04

看起来更像是手写笔扩展的问题。

该选择器在 Chrome 开发工具和其他 CSS 环境。

取消回复