Der ~ allgemeine Geschwisterkombinator ist, was Sie suchen
%Vor% Was der obige Selektor tut, ist also, alle p -Elemente auszuwählen, die neben #one bis #two liegen. Später benutze ich :not() pseudo, um die letzte p auszuschließen:
Wenn zwei Elemente Geschwister sind (dh dasselbe Elternelement haben), ist es in Selektoren 3 nicht möglich, einen Selektor zu schreiben, der Elementen zwischen ihnen entspricht, wenn die Struktur der Elemente nicht bekannt ist (oder wenn bekannt ist, dass sie sich ändert). .
In Selektoren 3 können Sie nur die Elemente zwischen ihnen zuordnen, wenn einer oder beide der folgenden Werte zutreffen:
Die Baumposition der beiden Elemente relativ zu ihrem übergeordneten Element ist bekannt.
Wenn beispielsweise #one immer das erste untergeordnete Element ist und #two immer das letzte untergeordnete Element ist, ist dies ganz einfach:
oder
%Vor% (Beachten Sie, dass ich :not(:first-child) nicht einbeziehe, weil der ~ -Kombinator bereits sicherstellt, dass das erste übereinstimmende Element niemals das erste Kind ist - Sie möchten es vielleicht für die zusätzliche Spezifität oder sogar nur für das Klarheit.)
Wenn #one immer das zweite Kind und #two immer das fünfte Kind ist:
Wenn #one immer das zweite Kind und #two immer das drittletzte Kind ist:
Die Anzahl der übereinstimmenden Elemente ist bekannt.
Beachten Sie, dass wenn # 1 wahr ist, sollten Sie die in # 1 beschriebenen Techniken verwenden, nicht hier. Die folgende Technik ist extrem langwierig und soll als letzter Ausweg dienen, wenn # 1 nicht wahr ist.
Wenn es immer nur n -Elemente zwischen #one und #two gibt, müssen Sie eine Liste von Selektoren erstellen, die mit #one beginnen und jedem nachfolgenden Selektor + p hinzufügen bis zu n mal.
Zum Beispiel, wenn es immer nur drei p -Elemente zwischen #one und #two geben wird:
Wenn in Selektoren 4 #one und #two wie in einem übereinstimmenden Dokument eindeutig sind, sind die folgenden Selektoren robust (dh sie funktionieren für jede Struktur von Elementen, , auch wenn bekannt ist, dass sie ):
oder
%Vor% Verwenden Sie :has() in jQuery und anderen Nicht-CSS-Kontexten, in denen es unterstützt wird, und :not() in CSS (wobei :has() mit dem ~ -Kombinator voraussichtlich nicht unterstützt wird). Letztere funktioniert in Safari ; Es ist noch nicht bekannt, wann es in anderen Browsern geliefert wird.
Tags und Links css css-selectors