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

php中世界最好的语言
リリース: 2018-03-21 17:07:31
オリジナル
1582 人が閲覧しました

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

レンダリング:


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




    
    Document
    
    

    
            
  • 1
  •         
  • 2
  •         
  • 3
  •         
  • 4
  •         
  • 5
  •         
  • 6
  •     
ログイン後にコピー

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

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




    
    Document
    
    

    
            
  • 1
  •         
  • 2
  •         
  • 3
  •         
  • 4
  •         
  • 5
  •         
  • 6
  •     
ログイン後にコピー

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

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

推奨読書:

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

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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!