So legen Sie mit CSS3 eine Listentrennlinie ohne Ober- und Unterkante fest-CSS-Tutorial-php.cn

So legen Sie mit CSS3 eine Listentrennlinie ohne Ober- und Unterkante fest

不言

Freigeben： 2018-06-25 15:42:22

Original

1684 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 ), wird ein detaillierter Beispielcode als Referenz und zum Studium bereitgestellt, werfen wir einen Blick unten.

Dieser Artikel stellt hauptsächlich den relevanten Inhalt zur Verwendung von CSS3 zum Festlegen der Listenintervalllinie ohne Ober- und Unterkante vor. Er wird für alle als Referenz und zum Studium freigegeben:

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 wird als universeller Geschwisterselektor bezeichnet und passt das P-Element nach dem P-Element an. also das erste Das P-Element wird nicht abgeglichen.

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, verwenden Sie dann :first-of-type, um das erste li zu finden und brechen Sie border-top ab.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS3 realisiert den Effekt von transparentem Hintergrundtext und Undurchsichtigkeit

Verwenden Sie CSS3, um das Scrollen des Textes zu realisieren in regelmäßigen Abständen

Das obige ist der detaillierte Inhalt vonSo legen Sie mit CSS3 eine Listentrennlinie ohne Ober- und Unterkante fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!