Maison  >  Questions et réponses  >  le corps du texte

Comment sélectionner des éléments contenant des éléments enfants avec des attributs donnés en CSS ?

J'essaie d'écrire un script utilisateur qui sélectionne un objet avec un attribut [is 的 元素的

元素-dismissed] comme enfant direct.

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

Les environnements prennent en charge la sélection par attribut ; ce script utilisateur est capable de sélectionner les éléments enfants de l'élément cible :

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

L'environnement prend également en charge :has() 选择器;该脚本能够选择包含

(indépendamment des propriétés ou de la profondeur de l'héritage).

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

Enfin, l'environnement supporte > 子选择器;此脚本能够选择

的直接子元素 éléments :

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

Mais lorsque j'essaie de combiner le sélecteur :has() avec n'importe quel autre outil, tout s'effondre. Je veux que le CSS que je recherche ressemble à ceci :

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

Cependant, cela renvoie une erreur dans Stylus sur Opera. La première erreur est 预期 RPAREN 但发现 '>'。;如果作为诊断步骤删除 >,则第一个错误将改为 Expected RPAREN but found '['.。如果我删除 [is-dismissed], la première erreur est toujours là.

Bien que je ne trouve aucune information indiquant si :has() 是否可以支持具有属性选择器的子项的信息,但我发现了一些资料(包括这个)表明> 选择器应该与 :has() peut prendre en charge les enfants avec des sélecteurs d'attributs, j'ai trouvé certaines sources (y compris celle-ci) qui suggèrent que les sélecteurs > devraient fonctionner correctement avec . Est-ce un bug d'implémentation (dans Opera et/ou Stylus), une combinaison non supportée de sélecteurs CSS (soit dans Opera, soit dans CSS dans son ensemble), un bug de ma part lors de l'assemblage de ces sélecteurs, ou autre chose ? 🎜

P粉170438285P粉170438285379 Il y a quelques jours549

répondre à tous(1)je répondrai

  • P粉404539732

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

    Cela ressemble plus à un problème d'extension du stylet.

    Ce sélecteur est disponible dans Chrome Dev Tools et Autres environnements CSS.

    répondre
    0
  • Annulerrépondre