Existe-t-il un sélecteur pour sélectionner les éléments frères et sœurs précédents ?

Question

Le sélecteur Plus (+) est utilisé pour sélectionner le prochain frère ou sœur adjacent.

Existe-t-il un équivalent pour le frère ou la sœur précédent ?

Answer 1

J'ai trouvé un moyen de styliser tous les frères et sœurs précédents (par opposition à ~) qui pourrait fonctionner en fonction de vos besoins.

Supposons que vous ayez une liste de liens, lorsque la souris survole l'un des liens, tous les liens précédents devraient devenir rouges. Vous pouvez faire ceci :

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

Answer 2

Non, il n'y a pas de sélecteur "frère précédent".

Dans le même ordre d'idées, ~ 用于一般后继同级元素（意味着该元素位于该元素之后，但不一定紧随其后），并且是一个 CSS3 选择器。 + représente le prochain frère, qui est CSS2.1.

Voir Combinateurs de frères et sœurs adjacents "http://www.w3.org/TR/css3-selectors/" rel="noreferrer">Sélecteur niveau 3 et 5.7 Sélecteurs de frères et sœurs adjacents de Feuilles de style en cascade niveau 2 Révision 1 (CSS 2.1) Spécification.