suchen

Heim  >  Artikel  >  Web-Frontend  >  CSS Proximity Selector Property Guide: + und ~

CSS Proximity Selector Property Guide: + und ~

PHPz
PHPzOriginal
2023-10-20 18:24:201025Durchsuche

CSS 邻近选择器属性指南：+ 和 ~

CSS Proximity Selector Properties Guide: + und ~

CSS Proximity Selector ist eine Eigenschaft, die zum Auswählen benachbarter Elemente verwendet wird, einschließlich + und ~.

+ Selektor wird verwendet, um das erste angrenzende Element unmittelbar nach dem angegebenen Element auszuwählen. In der HTML-Struktur werden zwei Geschwisterelemente desselben übergeordneten Elements als benachbarte Elemente bezeichnet.

~Der Selektor wird verwendet, um alle angrenzenden Elemente nach dem angegebenen Element auszuwählen.

Verwenden Sie diese Proximity-Selektor-Eigenschaften, um den Stil zwischen Seitenelementen flexibel zu steuern. Im Folgenden demonstrieren wir die Verwendung der +- und ~-Selektoren anhand konkreter Codebeispiele.

Zuerst erstellen wir ein einfaches HTML-Dokument, das eine Reihe benachbarter dc6dce4a544fdca2df29d5ac0ea9906b Elemente enthält: 

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            background-color: gray;
        }
        .box:hover {
            background-color: red;
        }
        .box + .box {
            background-color: blue;
        }
        .box ~ .box {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

Im obigen Code definieren wir zunächst eine CSS-Klasse namens box, die die Breite, Höhe, den unteren Rand und die Hintergrundfarbe definiert. Wenn die Maus über das Box-Element fährt, definieren wir auch die Pseudoklasse :hover, die verwendet wird, um die Hintergrundfarbe in Rot zu ändern.

Als nächstes verwenden wir den +-Selektor, um die Hintergrundfarbe des ersten angrenzenden Elements als Blau zu definieren. Dies bedeutet, dass die Hintergrundfarbe des zweiten Boxelements nach dem ersten Boxelement blau wird.

Dann verwenden wir den ~-Selektor, um die Hintergrundfarbe aller angrenzenden Elemente nach dem ersten Box-Element als grün zu definieren. Das bedeutet, dass die Hintergrundfarbe des zweiten, dritten und vierten Boxelements nach dem ersten Boxelement alle grün wird.

Speichern Sie den obigen Code und führen Sie ihn aus. Wir werden sehen, dass das Box-Element auf der Seite gemäß dem von uns definierten Stil gerendert wird. Wenn Sie mit der Maus über das Boxelement fahren, ändert sich dessen Hintergrundfarbe in Rot. Die Hintergrundfarbe des zweiten Boxelements, das unmittelbar auf das erste Boxelement folgt, ändert sich in Blau, während sich die Hintergrundfarbe der anderen Boxelemente in Grün ändert.

Dies ist ein einfaches Beispiel für die Verwendung der Näherungsselektorattribute + und ~. Sie können es je nach Bedarf und Seitenstruktur flexibel einsetzen, um vielfältigere Effekte und Layouts zu erzielen.

Zusammenfassend lässt sich sagen, dass die CSS-Proximity-Selector-Eigenschaft eine bequeme Möglichkeit bietet, benachbarte HTML-Elemente auszuwählen und zu formatieren. Mit dem +-Selektor können wir das erste benachbarte Element direkt nach dem angegebenen Element auswählen. Mit dem ~-Selektor können wir alle benachbarten Elemente nach dem angegebenen Element auswählen. Diese Selektoreigenschaften bieten eine feinere Kontrolle und ermöglichen uns die Erstellung komplexerer und reichhaltigerer Seitenlayout- und Stileffekte.

Ich hoffe, dieser Artikel hilft Ihnen, die Eigenschaften von CSS-Proximity-Selektoren zu verstehen und anzuwenden. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht zur Diskussion!

Das obige ist der detaillierte Inhalt vonCSS Proximity Selector Property Guide: + und ~. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html 选择器 伪类
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der transparenten CSS-Bildeigenschaften: Deckkraft und HintergrundbildNächster Artikel：Detaillierte Erläuterung der transparenten CSS-Bildeigenschaften: Deckkraft und Hintergrundbild

In Verbindung stehende Artikel

Mehr sehen