Heim > Artikel > Web-Frontend > So legen Sie mit CSS3 eine Listentrennlinie ohne Ober- und Unterkante fest

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

不言Original: 2018-06-25 15:42:221705Durchsuche

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>

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>

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!

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：CSS3 erzielt den Effekt eines transparenten Hintergrunds und eines undurchsichtigen TextsNächster Artikel：CSS3 erzielt den Effekt eines transparenten Hintergrunds und eines undurchsichtigen Texts

In Verbindung stehende Artikel

Mehr sehen