Le sélecteur parent existe-t-il en CSS ?
P粉713866425
2023-08-21 10:43:42
<p>Comment sélectionner l'élément <code><li></code> qui est le parent direct de l'élément d'ancrage ? </p>
<p>Par exemple, mon CSS pourrait ressembler à ceci : </p>
<pre class="brush:php;toolbar:false;">li <
valeur de la propriété;
}</pré>
<p>Évidemment, il est possible d'y parvenir en utilisant JavaScript, mais j'espérais une solution de contournement native du CSS niveau 2. </p>
<p>Le menu que j'essaie de styliser est généré par un CMS, je ne peux donc pas déplacer l'élément actif dans l'élément <code><li></code> le module de création de menu, mais je préfère ne pas faire ça). </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez utiliser des
:has()pseudo-classes CSSMais sa prise en charge par navigateur est limitée (Firefox n'est pas encore pris en charge).
Actuellement, il n'existe aucun moyen en CSS de sélectionner l'élément parent d'un élément afin qu'il fonctionne correctement dans tous les navigateurs.
Selectors Level 4 Working Draft contient une
:has()pseudo-classe qui fournira cette fonctionnalité. Ce serait similaire à l'implémentation de jQuery, mais actuellement non pris en charge par Firefox.li:has(> a.active) { /* 应用于li标签的样式 */ }Actuellement, seul Firefox ne prend pas en charge cette fonctionnalité par défaut.
En attendant, si vous devez sélectionner un élément parent avec une prise en charge complète de tous les navigateurs, vous devrez utiliser JavaScript dans Firefox.