recherche

Maison >interface Web >tutoriel CSS >css3 annule les lignes de séparation des listes supérieure et inférieure

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

php中世界最好的语言
php中世界最好的语言original
2018-03-21 17:07:311728parcourir

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Dessinez un cercle concentrique en utilisant CSS3Article suivant：Dessinez un cercle concentrique en utilisant CSS3

Articles Liés

Voir plus