Heim > Artikel > Web-Frontend > CSS3-Einstellungsbeispiel für die List-Spacer-Methode ohne Ober- und Unterkante

CSS3-Einstellungsbeispiel für die List-Spacer-Methode ohne Ober- und Unterkante

小云云Original: 2017-12-19 10:16:171731Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung von CSS3 zum Festlegen der Listenintervalllinie ohne Ober- und Unterkante vorgestellt. Der Artikel teilt zwei Lösungen, nämlich die Verwendung des universellen Geschwisterselektors (~) und des Pseudoklassenselektors (:first-of-). type / :last-of-type), ein detaillierter Beispielcode wird als Referenz und zum Studium bereitgestellt, werfen wir einen Blick unten. Ich hoffe, es hilft allen.

Rendering:

Methode 1: Universeller Geschwisterselektor (~)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width">
    <style>
        ul {margin: 0; padding: 0;}
        li { list-style: none; height: 50px; line-height: 50px;}
        li~li {border-top: 1px solid #000;} 
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

li~li { .. .} Das ~-Symbol in wird als universeller Geschwisterselektor bezeichnet, der mit dem P-Element nach dem P-Element übereinstimmt, sodass das erste P-Element nicht übereinstimmt.

Methode 2: Pseudoklassenselektor ( :first-of-type / :last-of-type )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width">
    <style>
        ul {margin: 0; padding: 0;}
        li { border-top: 1px solid #000; list-style: none; height: 50px; line-height: 50px;}
        li:first-of-type {border-top: none;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

Setzen Sie zuerst border-top für alle li ein und verwenden Sie dann: first -of-type findet das erste li und bricht border-top ab.

Verwandte Empfehlungen:

CSS3-Beispiel für einen allmählich leuchtenden quadratischen Rand

Schritte zur Optimierung von HTML5-Formularen mit CSS3

So implementieren Sie Optionsfeld-Animationseffekte in CSS3

Das obige ist der detaillierte Inhalt vonCSS3-Einstellungsbeispiel für die List-Spacer-Methode ohne Ober- und Unterkante. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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 färben Sie Website-Seiten mit CSS grauNächster Artikel：So färben Sie Website-Seiten mit CSS grau

In Verbindung stehende Artikel

Mehr sehen