css3はリストの上下の区切り線を解除します

今回はCSS3でのリストの上下の区切り線を解除するための注意事項をお届けしますので、一緒に見ていきましょう。

レンダリング:

方法 1: ユニバーサルブラザーセレクター(~)

nbsp;html>


    <meta>
    <title>Document</title>
    <meta>
    <style>
        ul {margin: 0; padding: 0;}
        li { list-style: none; height: 50px; line-height: 50px;}
        li~li {border-top: 1px solid #000;} 
    </style>


    

        
• 1
        
• 2
        
• 3
        
• 4
        
• 5
        
• 6
    

li~li {...} 内の ~ 記号はユニバーサルブラザーと呼ばれますselector は P 要素以降の P 要素と一致するため、最初の P 要素は一致しません。

方法 2: 疑似クラスセレクター (:first-of-type / :last-of-type )

nbsp;html>


    <meta>
    <title>Document</title>
    <meta>
    <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>


    

        
• 1
        
• 2
        
• 3
        
• 4
        
• 5
        
• 6
    

まず、すべての li を border-top に設定し、次に次を使用します。 -of-type は最初の li を見つけて、border-top をキャンセルします。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS3のフィルター属性の詳細な説明

ラジオボックスとチェックボックスのスタイルの最適化

CSSの優先度計算の基礎となるルール

以上がcss3はリストの上下の区切り線を解除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。