Apprenez à utiliser efficacement les sélecteurs composés dans les fonctions de pseudo-classe CSS : host-context(<selector>)
Dans la documentation MDN, :host-context() est défini comme :
: la fonction de pseudo-classe CSS host-context() sélectionne l'hôte fantôme qui contient le DOM fantôme du CSS dans lequel il se trouve (vous pouvez donc sélectionner des éléments personnalisés à partir de son DOM fantôme) - mais seulement si le sélecteur est donné en fonction argument Valable uniquement s'il correspond à la position de l'ancêtre de l'hôte fantôme dans la hiérarchie DOM. En d'autres termes, cela permet à un élément personnalisé ou à tout élément de son DOM fantôme d'avoir différents styles appliqués en fonction de sa position dans le DOM externe ou des classes/propriétés appliquées aux éléments ancêtres.
Le problème est que dans l'exemple live fourni, :host-context(article, aside) { color: gray; } 语句不起作用。同样，如果我尝试添加其他以空格分隔的复合选择器，例如 :host-context(h1 a){ background: orange}, j'ai rencontré le même problème.
Voici l'exemple donné dans la page de documentation :
/* 仅选择影子根主机，前提是它是选择器参数的后代 */
:host-context(h1) {
font-weight: bold;
}
:host-context(main article) {
font-weight: bold;
}
/* 当在文档主体上应用 .dark-theme 类时，将段落文本颜色从黑色更改为白色 */
p {
color: #000;
}
:host-context(body.dark-theme) p {
color: #fff;
}
Est-ce que quelqu'un sait pourquoi cela se produit, ou comment faire fonctionner les sélecteurs délimités par des espaces (comme les sélecteurs descendants) dans les arguments des :host-context() fonctions de pseudo-classe ?
Je m'attendais :host-context() 伪类函数能够使用类似于 h1 a à ce que la fonction pseudo-classe soit capable de prendre un sélecteur composé séparé par des espaces similaire à h1 a comme argument, car c'est ainsi qu'il est décrit dans la page de documentation.
Merci.
