ホームページ >ウェブフロントエンド >CSSチュートリアル >css3を使って上下端のないリスト区切り線を設定する方法

css3を使って上下端のないリスト区切り線を設定する方法

不言オリジナル: 2018-06-25 15:42:221776ブラウズ

この記事では主に、CSS3 を使用して上端と下端のないリスト間隔線を設定する方法を紹介します。この記事では、ユニバーサル兄弟セレクター (~) と疑似クラスセレクター (:first-of-type / ) を使用する 2 つの解決策を共有します。 :last-of-type)、詳細なサンプルコードが参照と学習のために提供されています。以下を見てみましょう。

この記事では、CSS3 を使用して上下の端なしでリストの間隔線を設定する方法に関する関連コンテンツを主に紹介します。詳細な紹介を見てみましょう。

方法 1: ユニバーサル兄弟セレクター (~)

<!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 {...} {...} の ~ 記号はユニバーサル兄弟セレクターと呼ばれます、P 要素の後の P 要素と一致するため、最初の P 要素は一致しません。

方法 2: 疑似クラスセレクター (: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>

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

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

css3を使って上下端のないリスト区切り線を設定する方法

関連記事