CSSは親要素を直接選択することはできませんが、ターゲット効果は、構(gòu)造理解を通じて特定のセレクターで間接的に達成できます。 1。：has（）pseudo-class（実験）を使用して、.container：has（.special）など、子要素が存在するかどうかに応じて親要素を選択します。 2。スタイルコントロールを?qū)g現(xiàn)するために、親要素に特定のクラス名を手動で追加します。 3. JavaScriptを使用して、クラス名を動的に判斷して追加して、子要素の狀態(tài)の変更に応答します。

CSSセレクターを介して親要素を選択する場合、実際に制限に遭遇します。CSSは「親要素」を直接選択することをサポートしません。つまり、JavaScriptを書くように、子要素から親要素を逆に見つけることができません。

ただし、構(gòu)造を理解したり、特定のセレクターの組み合わせを使用したりすることにより、ターゲット効果を間接的に達成するか、特定のシナリオで同様の目標を達成することができます。

CSSには「親セレクター」がないことを理解してください

現(xiàn)在のCSS仕様（2024年現(xiàn)在）では、子要素から親要素を逆に選択する構(gòu)文はありません。たとえば、これを書きたい：

 .child：親{
  /*私はスタイルが親の上で機能することを願っています*/
}

これは無効です。したがって、子要素の狀態(tài)に基づいて親要素のスタイルを変更する必要がある場合は、JavaScriptまたはHTML構(gòu)造とスタイルのデザインを再考する必要があります。

構(gòu)造的関係を使用して「親要素」を間接的に操作します

親要素を直接選択することはできませんが、他のセレクターを使用して、既知の親子構(gòu)造を通じて視覚的な「作業(yè)性」を?qū)g現(xiàn)できます。

構(gòu)造の例：

 <div class = "container">
  <p>私は段落</p>です
</div>

pの存在または狀態(tài)に基づいて.containerに影響を與えたい場合、これは純粋なCSSでは実行できません。しかし、あなたはこれを行うことができます：

• 事前にコンテナに特定のクラス名を追加します
• 擬似クラスの組み合わせ階層構(gòu)造の使用

たとえば、特定の子要素が表示されたときに親要素を異なるスタイルにしたい場合は、HTMLに追加のクラス名を追加できます。

 <div class = "container has special-child">
  <P class = "Special"> Special Content </p>
</div>

次に、CSSで：

 .container.hasスペシャルチャイルド{
  境界線：1px固體赤;
}

この方法は自動ではありませんが、手動で制御できます。

使用:has() pseudo-class（実験）

最新のCSS標準では、非常に便利だが実験的なセレクター - :has()を紹介します。これにより、子要素が存在するかどうかに基づいて親要素を選択できます。

例えば：

 .container：has（.special）{
  背景色：黃色。
}

上記のコードは、「 .containerに.special子要素が含まれている場合、黃色の背景を適用します。」

anutea dote ：： :has()は現(xiàn)在、主流のブラウザでは完全にはサポートされていません（Chromeがすでにサポートしているなど、FirefoxとSafariサポートは遅れています）。生産環(huán)境で使用する場合は、互換性を慎重に評価する必要があります。

実際の開発における提案

実際のプロジェクトでは、子要素の狀態(tài)に応じて親要素スタイルを変更する必要がある場合は、次の実踐をお勧めします。

• html（最も安定）の親要素に追加のクラス名を追加する
• javaScriptを使用して、クラス名を動的に判斷して追加します（動的コンテンツに適しています）
• visual視覚スタイルの変更にすぎない場合は、子要素自體によって制御できるかどうかを検討します（親効果をシミュレートするためにmarginやpaddingなど）

たとえば、JSを使用してクラス名を動的に追加します。

 document.queryselectorall（ '。特別'）。foreach（el => {{
  el.parentelement.classlist.add（ 'has special'）;
}）;

次に、CSSで定義します。

 .has-special {
  ボーダー：2pxダッシュブルー。
}

基本的にそれだけです。 CSSは親要素を直接選択することはできませんが、構(gòu)造的理解と最新の技術(shù)を通じて適切な代替手段を見つけることができます。

以上がCSSセレクターを使用して親要素を選択する方法は？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。