ホームページ >ウェブフロントエンド >CSSチュートリアル >css3はリストの上下の区切り線を解除します
css3はリストの上下の区切り線を解除します
- php中世界最好的语言オリジナル
- 2018-03-21 17:07:311733ブラウズ
今回は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 {...} 内の ~ 記号はユニバーサルブラザーと呼ばれますselector は 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 に設定し、次に次を使用します。 -of-type は最初の li を見つけて、border-top をキャンセルします。
この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がcss3はリストの上下の区切り線を解除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：css3で同心円を描く次の記事：css3で同心円を描く