Erfahren Sie, wie Sie zusammengesetzte Selektoren in CSS-Pseudoklassenfunktionen effektiv verwenden: host-context(<selector>)

Question

In der MDN-Dokumentation ist :host-context() definiert als:

:host-context() CSS-Pseudoklassenfunktion wählt den Schattenhost aus, der das Schatten-DOM des CSS enthält, in dem es sich befindet (so dass Sie benutzerdefinierte Elemente aus seinem Schatten-DOM auswählen können) – aber nur, wenn der Selektor als Funktion angegeben ist Argument Nur gültig, wenn es mit der Position des Vorfahren des Schattenhosts in der DOM-Hierarchie übereinstimmt. Mit anderen Worten: Dies ermöglicht, dass auf ein benutzerdefiniertes Element oder irgendetwas in seinem Schatten-DOM unterschiedliche Stile angewendet werden, basierend auf seiner Position im äußeren DOM oder den auf Vorgängerelemente angewendeten Klassen/Eigenschaften.

Das Problem besteht darin, dass ich im bereitgestellten Live-Beispiel :host-context(article, aside) { color: gray; } 语句不起作用。同样，如果我尝试添加其他以空格分隔的复合选择器，例如 :host-context(h1 a){ background: orange} auf dasselbe Problem gestoßen bin.

Hier ist das Beispiel auf der Dokumentationsseite:

/* 仅选择影子根主机，前提是它是选择器参数的后代 */
: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;
}

Weiß jemand, warum das passiert, oder wie man durch Leerzeichen getrennte Selektoren (wie Nachkommenselektoren) in Argumenten für :host-context() Pseudoklassenfunktionen funktionieren lässt?

Ich habe erwartet, dass :host-context() 伪类函数能够使用类似于 h1 a die Pseudoklassenfunktion einen durch Leerzeichen getrennten zusammengesetzten Selektor ähnlich wie h1 a als Argument verwenden kann, da dies auf der Dokumentationsseite so beschrieben ist.

Vielen Dank.

Answer 1

这是MDN示例中的无效代码。只有<compound-selector>或<simple-selector>才是被接受的类型。

我进行了更改，并且这个pull request已经被批准。

---

描述

从文档中删除了无效的示例。

文档中的语法

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

无效示例

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

这是无效的，因为提供给:host-context()伪类函数的参数不是<compound-selector>。相反，它是一个“选择器列表”，这是无效的并且在实际示例中不起作用。

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

这是无效的，因为提供给:host-context()伪类函数的参数不是<compound-selector>。相反，它是一个<complex-selector>，这是无效的并且在实际示例中不起作用。

这在选择器的结构 - CSS选择器 - MDN文档页面中有解释。

动机

在查看实际示例时，无效的CSS会引起混淆。