Was bedeutet ~ in CSS?

Der ~-Operator in CSS „universeller Nachkommenselektor“ wird verwendet, um alle nachfolgenden Geschwister eines Elements abzugleichen. Die Syntax lautet Selector1 ~ Selector2, was bedeutet, dass das Geschwisterelement nach Selector1 übereinstimmt und das Element den Stil Selector2 hat. Es wird häufig in Szenarien wie Stilen untergeordneter Elemente, Navigationsmenüs und Tabellenlesbarkeit verwendet.

Bedeutung von ~ in CSS

Der ~-Operator in CSS, bekannt als „universeller Nachkommenselektor“, wird verwendet, um alle nachfolgenden Geschwister eines Elements abzugleichen. Konkret:

• Syntax: selector1 ~ selector2selector1 ~ selector2
• 含义：匹配所有位于 selector1 后面且具有 selector2

Bedeutung:

Entspricht allen, die nach selector1 stehen und den selector2haben > Stilelemente, sie müssen jedoch gleichgeordnete Elemente sein (d. h. unter demselben übergeordneten Element).

Beispiel:

Der folgende Stil fügt allen Absatzelementen, die sich nach einem Element mit dem Klassennamen „box“ befinden, einen roten Rahmen hinzu:

<code class="css">.box ~ p {
  border: 1px solid red;
}</code>

Wie verwende ich den ~-Selektor?

• ~ Selektoren werden normalerweise verwendet, um:
• Stile für untergeordnete Elemente anzuwenden: Stile auf bestimmte untergeordnete Elemente eines bestimmten übergeordneten Elements anzuwenden.
• Navigationsmenü erstellen: Fügen Sie Stile zu Navigationsmenüelementen hinzu, wenn Sie mit der Maus darüber fahren oder im aktiven Zustand sind.
• Erstellen Sie Kontrollkästchen und Optionsfelder: Wenden Sie Stile auf die Beschriftungen von Kontrollkästchen oder Optionsfeldern an.

Verbessern Sie die Lesbarkeit der Tabelle:

Fügen Sie den Tabellenzeilen abwechselnd verschiedene Farben oder Hintergründe hinzu.

Es ist zu beachten, dass:
• ~ Der Selektor kann nur mit nachfolgenden Geschwisterelementen übereinstimmen, nicht jedoch mit übergeordneten Elementen oder Vorgängerelementen.

🎜~ Der Selektor führt eine Tiefensuche nach Elementen im Dokumentbaum durch, was bedeutet, dass er zuerst nach untergeordneten Elementen und dann nach Geschwisterelementen sucht. 🎜🎜

Das obige ist der detaillierte Inhalt vonWas bedeutet ~ in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!