Apprenez à utiliser efficacement les sélecteurs composés dans les fonctions de pseudo-classe CSS : host-context(<selector>)

Question

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.

Answer 1

Il s'agit d'un code invalide de l'exemple MDN. Seul <compound-selector>或<simple-selector> est le type accepté.

J'ai effectué les modifications et cette pull request a été approuvée.

---

Description

Suppression des exemples invalides de la documentation.

Syntaxe dans la documentation

:host-context(<compound-selector>) {
  /* ... */
}

Exemple invalide

:host-context(article, aside) { color: gray; }

Ceci n'est pas valide car fourni à :host-context()伪类函数的参数不是<compound-selector>. Au lieu de cela, il s'agit d'une "liste de sélection", qui n'est pas valide et ne fonctionnera pas dans un exemple réel.

:host-context(main article) {
  font-weight: bold;
}

Ceci n'est pas valide car fourni à :host-context()伪类函数的参数不是<compound-selector>。相反，它是一个<complex-selector>. Au lieu de cela, il s'agit d'un <complex-selector>, qui n'est pas valide et ne fonctionnera pas dans un exemple réel.

Ceci est expliqué dans la page Structure des sélecteurs - Sélecteurs CSS - Documentation MDN .

Motivation

Un CSS invalide peut prêter à confusion lorsque l'on regarde des exemples réels.