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

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

高洛峰
Freigeben: 2017-03-07 14:36:47
Original
2345 Leute haben es durchsucht

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>
Nach dem Login kopieren

CSS-Code:

li+li { font-size: 50px; }
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage