CSS3-Einstellungsbeispiel für die List-Spacer-Methode ohne Ober- und Unterkante-CSS-Tutorial-php.cn

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

小云云

Freigeben： 2017-12-19 10:16:17

Original

1689 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!