J'ai trouvé un moyen de styliser tous les éléments frères et sœurs précédents (par opposition à~), en fonction de vos besoins.
Supposons que vous ayez une liste de liens, lorsque vous survolez l'un des liens, tous les liens précédents devraient devenir rouges. Vous pouvez faire ceci :
/* 默认链接颜色为蓝色 */ .parent a { color: blue; } /* 前面的兄弟元素应该是红色的 */ .parent:hover a { color: red; } .parent a:hover, .parent a:hover ~ a { color: blue; }
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai trouvé un moyen de styliser tous les éléments frères et sœurs précédents (par opposition à
~), en fonction de vos besoins.Supposons que vous ayez une liste de liens, lorsque vous survolez l'un des liens, tous les liens précédents devraient devenir rouges. Vous pouvez faire ceci :
/* 默认链接颜色为蓝色 */ .parent a { color: blue; } /* 前面的兄弟元素应该是红色的 */ .parent:hover a { color: red; } .parent a:hover, .parent a:hover ~ a { color: blue; }Non, il n'y a pas de sélecteur "frère précédent".
Dans le même ordre d'idées,
~是用于一般的后续兄弟选择器（意思是元素在此元素之后，但不一定紧接着之后），它是CSS3选择器。+concerne le sélecteur de frère suivant, qui est CSS2.1.VoirAdjacent Sibling SelectordeSelector Level 3etAdjacent Sibling Combinatorde laCascading Style Sheets version 2.1 révision 1 (CSS 2.1) spécification.