ホームページ  >  に質問  >  本文

CSS 疑似クラス関数で複合セレクターを効果的に使用する方法を学びます: host-context(<selector>)

MDN ドキュメントでは、:host-context() は次のように定義されています:

:host-context() CSS 疑似クラス関数は、CSS のシャドウ DOM を含むシャドウ ホストを選択します (そのため、そのシャドウ DOM からカスタム要素を選択できます) - ただし、関数の引数として指定された場合のみです。セレクターは、DOM 階層内のシャドウ ホストの祖先の位置と一致する場合にのみ有効です。 言い換えれば、これにより、カスタム要素またはそのシャドウ DOM 内のあらゆるものに、外部 DOM 内の位置、または祖先要素に適用されたクラス/プロパティに基づいて、異なるスタイルを適用できるようになります。

問題は、提供されている実際の例では、:host-context(article,side) { color: grey; } ステートメントが機能しないことです。同様に、:host-context(h1 a){background:orange} のような他のスペース区切りの複合セレクターを追加しようとすると、同じ問題が発生します。

以下はドキュメント ページに記載されている例です:

リーリー

なぜこれが起こっているのか、またはスペース区切りのセレクター (子孫セレクターなど) を :host-context() 疑似クラス関数のパラメーターで機能させる方法を知っている人はいますか?

:host-context() 擬似クラス関数は、引数として h1 a のようなスペースで区切られた複合セレクターを受け取ることができると期待していました。そのようになっているからです。ドキュメントページに記載されています。

###ありがとう。

P粉268284930P粉268284930419日前992

全員に返信(1)返信します

  • P粉031492081

    P粉0314920812023-09-17 15:08:11

    これは、MDN サンプルの無効なコードです。 <compound-selector> または <simple-selector> のみが受け入れられるタイプです。

    変更を加えたので、この プル リクエスト は承認されました。


    ###説明する###

    無効な例をドキュメントから削除しました。

    ドキュメントの構文

    リーリー

    無効な例

    リーリー

    :host-context()

    疑似クラス関数に指定された引数が <compound-selector> ではないため、これは無効です。代わりに、これは「セレクター リスト」ですが、これは無効であり、実際の例では機能しません。 リーリー

    :host-context()

    疑似クラス関数に指定された引数が <compound-selector> ではないため、これは無効です。代わりに、これは <complex-selector> ですが、これは無効であり、実際の例では機能しません。 これについては、

    「セレクターの構造 - CSS セレクター - MDN ドキュメント」ページ

    で説明されています。 ###モチベーション### 無効な CSS は、

    実際の例

    を見るときに混乱を引き起こす可能性があります。

    返事
    0
  • キャンセル返事