Ketahui cara menggunakan pemilih kompaun dengan berkesan dalam fungsi kelas pseudo CSS: konteks hos(<selector>)

Question

Dalam dokumentasi MDN, :host-context() ditakrifkan sebagai:

:host-context() Fungsi kelas pseudo CSS memilih hos bayangan yang mengandungi DOM bayangan CSS di dalamnya (supaya anda boleh memilih elemen tersuai daripada DOM bayangannya) - tetapi hanya jika pemilih diberikan sebagai fungsi hujah Sah hanya jika ia sepadan dengan kedudukan nenek moyang hos bayangan dalam hierarki DOM. Dalam erti kata lain, ini membenarkan elemen tersuai atau apa-apa sahaja dalam DOM bayangannya untuk menggunakan gaya berbeza berdasarkan kedudukannya dalam DOM luar atau kelas/sifat yang digunakan pada elemen nenek moyang.

Masalahnya ialah dalam contoh langsung yang disediakan, :host-context(article, aside) { color: gray; } 语句不起作用。同样，如果我尝试添加其他以空格分隔的复合选择器，例如 :host-context(h1 a){ background: orange}, saya menghadapi masalah yang sama.

Berikut adalah contoh yang diberikan dalam halaman dokumentasi:

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

Adakah sesiapa tahu mengapa ini berlaku, atau cara membuat pemilih yang dibatasi ruang (seperti pemilih keturunan) berfungsi dalam hujah untuk :host-context() fungsi kelas pseudo?

Saya menjangkakan :host-context() 伪类函数能够使用类似于 h1 a fungsi kelas pseudo boleh mengambil pemilih kompaun yang dipisahkan ruang yang serupa dengan h1 a sebagai hujah, kerana itulah caranya diterangkan dalam halaman dokumentasi.

Terima kasih.

Answer 1

Ini adalah kod tidak sah daripada contoh MDN. Hanya <compound-selector>或<simple-selector> adalah jenis yang diterima.

Saya membuat perubahan dan permintaan tarik ini telah diluluskan.

---

Penerangan

Mengalih keluar contoh tidak sah daripada dokumentasi.

Sintaks dalam dokumentasi

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

Contoh tidak sah

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

Ini tidak sah kerana disediakan kepada :host-context()伪类函数的参数不是<compound-selector>. Sebaliknya, ia ialah "senarai pemilih", yang tidak sah dan tidak akan berfungsi dalam contoh sebenar.

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

Ini tidak sah kerana disediakan kepada :host-context()伪类函数的参数不是<compound-selector>。相反，它是一个<complex-selector>. Sebaliknya, ia adalah <complex-selector>, yang tidak sah dan tidak akan berfungsi dalam contoh sebenar.

Ini dijelaskan dalam Struktur Pemilih - Pemilih CSS - halaman dokumentasi MDN .

Motivasi

CSS yang tidak sah boleh menyebabkan kekeliruan apabila melihat contoh kehidupan sebenar.