css3 annule les lignes de séparation des listes supérieure et inférieure-tutoriel CSS-php.cn

css3 annule les lignes de séparation des listes supérieure et inférieure

php中世界最好的语言

Libérer： 2018-03-21 17:07:31

original

1671 Les gens l'ont consulté

Cette fois, je vais vous apporter les précautions pour annuler les lignes de séparation des listes supérieure et inférieure en CSS3.

Rendu :

Première méthode : Sélecteur universel de frères et sœurs(~)

<!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>

Copier après la connexion

li~li {...} Le symbole ~ dans li~li {...} est appelé un sélecteur universel de frères et sœurs , faisant correspondre l'élément P après l'élément P, donc le premier élément P ne sera pas mis en correspondance.

Méthode 2 : pseudo sélecteur de classe ( :premier de type / :dernier de 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>

Copier après la connexion

Définissez d'abord border-top pour tous les li, puis utilisez :first-of-type pour trouver le premier li et annuler border-top.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Explication détaillée de l'attribut de filtre de CSS3

Styles uniques d'optimisation de cases de sélection et de cases à cocher

Règles sous-jacentes pour le calcul de la priorité CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!