Heim > Artikel > Web-Frontend > Beispiel für die Verwendung des CSS-Selektors für benachbarte Geschwister

Beispiel für die Verwendung des CSS-Selektors für benachbarte Geschwister

高洛峰Original: 2017-03-07 14:36:472251Durchsuche

Um nach benachbarten HTML-Elementen mit demselben übergeordneten Element zu suchen, können Sie den CSS-Selektor für benachbarte Geschwister verwenden. Hier werfen wir einen Blick auf die Verwendung des CSS-Selektors für benachbarte Geschwister:

Auswählbar Ein Element, das unmittelbar auf ein anderes Element folgt und beide das gleiche übergeordnete Element haben. Im folgenden Code haben item2 und item3 eine Auswirkung, item1 hat jedoch nicht den
HTML-Code:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

CSS-Code:

li+li { font-size: 50px; }

1 Wenn Sie ein Element unmittelbar nach einem anderen Element auswählen müssen und beide das gleiche übergeordnete Element haben, können Sie Adjacent verwenden Geschwisterauswahl.
2. Der nebenstehende Geschwisterselektor verwendet das Pluszeichen „+“ als Anschluss.

Beispiel

<html>

<head>
    <style type="text/css">
        #p1 + p {   
            margin-top: 50px;   
        }   
    </style>
</head>

<body>
    <p id=&#39;p1&#39;>This is paragraph 1.</p>
    <p id=&#39;p2&#39;>This is paragraph 2.</p>
    <p id=&#39;p3&#39;>This is paragraph 3.</p>
    <p id=&#39;p4&#39;>This is paragraph 4.</p>
</body>

</html>

Beispiel für die Verwendung des CSS-Selektors für benachbarte Geschwister

Weitere Beispiele für die Verwendung benachbarter CSS-Geschwisterselektoren sind verwandt. Bitte beachten Sie die chinesische PHP-Website für Artikel!

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：So implementieren Sie den Fortschrittsbalken und den Bestellfortschrittsbalken mit CSSNächster Artikel：So implementieren Sie den Fortschrittsbalken und den Bestellfortschrittsbalken mit CSS

In Verbindung stehende Artikel

Mehr sehen