Heim  >  Fragen und Antworten  >  Hauptteil

Wie wähle ich Elemente aus, die untergeordnete Elemente mit bestimmten Attributen in CSS enthalten?

Ich versuche, ein Benutzerskript zu schreiben, das ein Objekt mit einem [is 的 元素的

元素-dismissed]-Attribut als direktes untergeordnetes Objekt auswählt.

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

Umgebungen unterstützen die Auswahl nach Attribut; dieses Benutzerskript kann untergeordnete Elemente des Zielelements auswählen:

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

Die Umgebung unterstützt auch :has() 选择器;该脚本能够选择包含

(unabhängig von Eigenschaften oder Vererbungstiefe).

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

Schließlich unterstützt die Umgebung > 子选择器;此脚本能够选择

的直接子元素 Elemente:

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

Aber wenn ich versuche, den :has()-Selektor mit einem anderen Werkzeug zu kombinieren, fällt alles auseinander. Ich möchte, dass das gesuchte CSS so aussieht:

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

Allerdings gibt dies einen Fehler in Stylus on Opera zurück. Der erste Fehler ist 预期 RPAREN 但发现 '>'。;如果作为诊断步骤删除 >,则第一个错误将改为 Expected RPAREN but found '['.。如果我删除 [is-dismissed], der erste Fehler ist immer noch da.

Obwohl ich keine Informationen darüber finden kann, ob :has() 是否可以支持具有属性选择器的子项的信息,但我发现了一些资料(包括这个)表明> 选择器应该与 :has() Kinder mit Attributselektoren unterstützen kann, habe ich einige Quellen (einschließlich dieser) gefunden, die darauf hinweisen, dass >-Selektoren gut mit funktionieren sollten. Ist das ein Implementierungsfehler (in Opera und/oder Stylus), eine nicht unterstützte Kombination von CSS-Selektoren (entweder in Opera oder in CSS insgesamt), ein Fehler meinerseits beim Zusammenstellen dieser Selektoren oder etwas anderes? 🎜

P粉170438285P粉170438285430 Tage vor586

Antworte allen(1)Ich werde antworten

  • P粉404539732

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

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

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

    Antwort
    0
  • StornierenAntwort