CSSに親セレクターは存在しますか?
P粉713866425
2023-08-21 10:43:42
<p>アンカー要素の直接の親である <code><li></code> 要素を選択するにはどうすればよいですか? </p>
<p>たとえば、私の CSS は次のようになります:</p>
<pre class="brush:php;toolbar:false;">li < a.active {
プロパティ: 値;
}</pre>
<p>明らかに、JavaScript を使用してこれを実現することは可能ですが、私は CSS レベル 2 にネイティブな回避策を期待していました。 </p>
<p>スタイルを設定しようとしているメニューは CMS によって生成されているため、アクティブな要素を <code><li></code> 要素に移動できません...(テーマを設定しない限り)メニュー作成モジュールを使用しますが、それはやりたくないです)。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
:has()
ただし、CSS 疑似クラスを使用できます。ブラウザのサポートは制限されています (Firefox はまだサポートされていません)。
現時点では、CSS には要素の親要素を選択して、すべてのブラウザで正しく動作する方法はありません。
Selectors Level 4 Working Draft には、この機能を提供する
リーリー:has()疑似クラスが含まれています。これは jQuery の実装 に似ていますが、現在 Firefox ではサポートされていません。現在、デフォルトでこの機能をサポートしていないのは Firefox だけです。 一方、完全なクロスブラウザサポートを備えた親要素を選択する必要がある場合は、Firefox で JavaScript を使用する必要があります。