简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何在 CSS 中选择包含具有给定属性的子元素的元素？
P粉170438285
P粉170438285 2023-09-08 18:24:41
0
1
546

我正在尝试编写一个用户脚本，该用户脚本选择包含带有 [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粉170438285
P粉170438285

全部回复(1)
P粉404539732
P粉4045397322023-09-09 11:10:04 1 楼

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

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

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！