CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス

セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に渡すことです。 CSS セレクターは、主に基本セレクター、属性セレクター、複合セレクター、疑似クラスセレクターの 4 つのカテゴリに分けられます。

CSS 基本セレクター

基本的なセレクターは、ワイルドカード、タグセレクター、クラスセレクター、ID セレクターに分類されます。ここで注意する必要があるプログラミングの考え方は、CSS カスケードスタイルシートの要素には ID が 1 つしかないということです。以下の点に注意してください: 1. ID の一意性 2. 要素 ID はそれぞれ異なります。ID カードは 1 枚しか持たないのと同じように、ID は ID カードを表します 3. クラスセレクターは一意ではなく、再利用できます。さらに、*ワイルドカードはグローバル

  <!DOCTYPE html>
<html lang="ja">
  <ヘッド>
      <メタ文字セット="UTF-8">
      <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
     <title>CSS 基本セレクター</title>
     <スタイル タイプ="text/css">
          *{
              色: スカイブルー;
         }/**ワイルドカード*/
         div{
             色: 赤;
         }/*タグセレクター*/
         。箱{
             色: スチールブルー;
         }/*クラスセレクタ*/.box{color: steelblue;}は*.box{color: steelblue;}と書くこともできます。これは、すべてのボックスのフォント色がsteelblueであることを意味します。
         ＃コンテンツ{
             色: トマト;
         }/*idセレクター*/
     </スタイル>
 </head>
 <本文>
     <div class="box" id="コンテンツ">
         Dahuiniu ブログは Web フロントエンド技術の学習に重点を置いています</div>
 </本文>
 </html>

CSS 組み合わせセレクター

基本的なセレクタを特別な記号でつなぎ合わせて、CSS 組み合わせセレクタと呼ぶ人もいます。一般的な CSS 組み合わせセレクタには、グループセレクタ、ネストされたセレクタ、サブセレクタ、隣接する同じレベルのセレクタなどがあります。

 <!DOCTYPE html>
  <html lang="ja">
  <ヘッド>
      <メタ文字セット="UTF-8">
      <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
      <title>CSS 組み合わせセレクター</title>
      <スタイル タイプ="text/css">
      /* div{
          色: ティール;
         フォントサイズ: 24px;
     }
     p{
         色: ティール;
     } */
     div{
         フォントサイズ: 24px;
     }
     div,p{
         色: ティール;
     }/*グループセレクター*/
     div p{
         色: 赤;
     }/*ネストされたセレクタ*/
     ul>li{
         フォントサイズ: 24px;
         リストスタイル: 正方形;
     }/*子セレクター*/
     div+p{
         色: 青;
     }/*同じレベルの隣接するセレクタ*/
     </スタイル>
 </head>
 <本文>
     <div>
         人々は成功という明るく美しい花だけを賞賛する！しかし、そのつぼみは闘争の涙に濡れ、犠牲の血にまみれていた。<p>私は多くのことを知っていて、多くのことを経験していると思っていたが、結局、それはすべてばかげていたことに気づいた。</p>
     </div>
     <p>成功の瞬間を見るだけでなく、成功のプロセスも見るべきです。そうすることで、努力を続け、成功という目標に向かって前進するモチベーションが生まれます。</p>
     <p>人々は成功という明るく美しい花に憧れるばかりです。しかし、その花のつぼみは苦闘の涙に濡れ、犠牲の血にまみれています。<span>私たちは成功した人々の栄光の瞬間を見るだけでなく、彼らの努力と苦闘の過程も見て、努力を続け、成功という目標に向かって進むよう自分自身を奮い立たせるべきです。</span></p>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </本文>
 </html>

CSS 属性セレクター

基本セレクタ [属性]、基本セレクタ [属性=値]、スペースで区切られた基本セレクタ [属性~=値]、基本セレクタ [属性^=値] の先頭、基本セレクタ [属性$=値] の末尾

<!DOCTYPE html>
 <html lang="ja">
 <ヘッド>
      <メタ文字セット="UTF-8">
      <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
      <title>CSS 属性セレクター</title>
      <スタイル タイプ="text/css">
     div[タイトル]/*基本セレクター[属性]*/
     div[title=英語]{
         色: 青;
     }/*基本セレクター[属性=値]*/
     div[title~=en]{
         色:#f90;
         フォントの太さ: 太字;
     }/*基本セレクター[属性~=値]には、いずれかの属性が含まれます*/
     p,div[タイトル^=zh]{
         フォントサイズ:24px;
         色: 茶色;
     }/*基本セレクター[属性^=値]は何で始まるか*/
     div[title$=中国]{
         文字間隔: 10px;
         テキスト装飾: 取り消し線;
         フォントスタイル: 斜体;
     }/*基本セレクター[属性$=値]は何で終わるか*/
     </スタイル>
 </head>
 <本文>
     <div title="英語">
         簡単に説明できないなら、十分に理解していないということだ
     </div>
     <div title="英語 en yingyu">
         気づかなかったんですか？ 2013 一生あなたを愛しています、2014 一生あなたを愛しています、2015 家中あなたを愛しています、2016 ずっとあなたを愛しています、2017 すべてにおいてあなたを愛しています、2018 半分だけあなたを愛しています、2019 まだあなたを愛しています、2020 あなたを愛しています、2021 ただあなたを愛しています🌝
     </div>
     <p title="ja">
         CSS セレクターの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス</p>
     <div title="zh en 中国">
         http://www.cnblogs.com/dhnblog/p/12293463.html
     </div>
 </本文>
 </html>

CSS 疑似クラスセレクター

文字通りに言えば、疑似とは偽物という意味で、要素とはタグとタグで囲まれた内容のことです。簡単に言うと、疑似要素とは偽物の要素のことで、偽物の反意語は実在物です。ページ内では、これらは自分たちで書いたものなので、本物です。この HTML ページでは、すべての要素に開始タグと終了タグが秘密裏に追加されます。これは疑似要素です。疑似クラスセレクターは、操作状態を参照します。

 <!DOCTYPE html>
 <html lang="ja">
  <ヘッド>
      <メタ文字セット="UTF-8">
      <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
      <title>CSS 疑似クラスセレクター</title>
     <スタイル タイプ="text/css">
          p{
              色: 茶色;
             境界線: 1px 黒一色;
             高さ: 40px;
             行の高さ: 40px;
         }
         p::前{
             内容: 「開始前」;
         }
         p::後{
             内容: "終了後";
         }
         /* ブロック要素の最初の文字::first-letter
         テキストの最初の行::first-line */
         div::最初の文字{
         フォントサイズ: 24px;
         色: 青;
         }
         div::最初の行{
             色:黄緑;
             フォントスタイル: 初期;
             フォントの太さ: 太字;
         }
     </スタイル>
 </head>
 <本文>
     <div class="box">http://www.dhnblog.com/ Dahuiniu Blog テクノロジーは世界の王様、努力は夢を実現させ、高さは態度次第<!--開始前-->
     <p>彼女へのバレンタインデーの挨拶、とても甘くて魅惑的で、すぐに彼女の心を掴みます！</p>
     <!-- 終了後 -->
     </div>
 </本文>
 </html>

要約する

以上がエディターが紹介するCSSセレクターの4大カテゴリー「基本、組み合わせ、属性、疑似クラス」です。皆様のお役に立てれば幸いです。123WORDPRESS.COMウェブサイトをご愛顧いただき誠にありがとうございます！

<<: HTML知識ポイントの実践経験のまとめ

>>: Mysqlはブール型の演算を設定します