技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CS スタイル セレクター。ページ内の HTML 要素を選択して CSS スタイルを追加するために使用されます。

レンダリング パフォーマンスが高い順に並べ替えます に続く：

ID セレクタ #id

id 属性で要素を選択します (大文字と小文字が区別されます)。

<p id="p1" >第一段</p>
1

#p1{
  color: red;
}
1
2
3

ただし、次の理由からその使用はお勧めできません。

• ID セレクターの優先順位が高く、スタイルをリセットするのは不便です。
• ID セレクターは主に JS によって使用されます。

クラスセレクター .class

要素の class 属性を通じてスタイル選択した要素のクラス名は大文字と小文字が区別されます

最も推奨される CSS セレクターは、クラス セレクターが強力なセマンティクスを持ち、スタイルを簡単にリセットできることです。

<span class="important" >重点词汇</span>
1

.important{
  color: red;
  font-weight: bold;
}
1
2
3
4

複数のスタイル クラスをスペースで区切って同じ要素に追加できます。

<span class="important big" >巨大的重点词汇</span>
1

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
1
2
3
4
5
6
7

タグセレクター 标签名

大文字と小文字を区別せず、タグ名で要素を選択します

<a href="https://www.baidu.com/" target="_blank" >百度</a>
1

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}
1
2
3

タグセレクターのパフォーマンスが悪く、メンテナンスコストが高いため推奨されません

ワイルドカードセレクター *

疑似要素を除くページ内のすべての HTML 要素を選択します。ブラウザのデフォルト スタイルをクリアするためによく使用されますが、パフォーマンスが消費されるためお勧めできません。

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
1
2
3
4
5

属性セレクター [属性]

属性と属性値に基づいて要素を選択します。属性では大文字と小文字が区別されません。また、属性値では大文字と小文字が区別されます。

疑似クラスセレクター :状态名

さまざまな状態に基づいて要素を選択する

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

リストで疑似クラスセレクターを使用する

nは0,1,2,3,4,5,6,7,8...を意味します(nが1未満の場合はn=0が選択されないため無効です)

テーブルで擬似クラスセレクターを使用する

• tr:nth-child(odd)：テーブルの行 1、3、および 5 と一致します。これは次と同等です。tr:nth-child(2n+1)。
• tr:nth-child(even): テーブルの行 2、4、および 6 と一致します。これは次と同等です。tr:nth-child(2n)。

• 擬似クラスセレクターの具体例

  • nth-child() を使用して、ゼブラ ストライプ、エッジ配置、指定範囲リストの強調表示、および動的リスト適応レイアウトを実装します。
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • CSS は動的な表示と非表示を実装します (:checked と :target の素晴らしい使用法)
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • 使用方法: ターゲットを使用してさらに展開、折りたたむ、タブを切り替えるhttps://blog.csdn.net/weixin_41192489/article/details/121969768

  • マテリアル デザイン スタイルのインタラクションを実現するには、プレースホルダー表示を使用します。
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • null 値を確認するには、:placeholder-shown を使用します。プロンプトを空にすることはできません。
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :checked は展開と折りたたみを実装します
    https://demo.cssworld.cn/selector/9/2-1.php

  • :checked はタブ切り替えを実装します
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked は、カスタム ラジオ ボタン、チェック ボックス、スイッチ、ラベル チェック、マテリアル ラジオ選択を実装します。
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • :valid と :invalid を使用してネイティブ フォーム検証を実装する
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • :required および :optional を使用してフォーム検証プロンプト テキストを実装します
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :focus-within はドロップダウン リストを実装します
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • 入力ボックスがフォーカスされたら、前面のラベルを強調表示します (リンクの方法 5 を参照)
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • マウスを置くと拡大画像が表示され、マウスをクリックすると拡大画像が表示されます
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • :empty は空の要素と欠落しているフィールドを非表示にします。スマート ヒント
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • :only-child はマルチステートの動的読み込みアニメーションを実装します。
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • :fullscreen クリックした画像を全画面表示します。
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  擬似要素セレクター ::

  要素全体ではなく、要素の一部を選択してスタイル設定するために使用されます。

  CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
  1

  ::before そして::after

  要素の前後にコンテンツを設定するには、content 属性と一緒に使用する必要があります。詳細については、を参照してください。
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  一般的に使用される実際の例:

  • 要素の前後にアイコンを追加します (::before と ::after の魔法)
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • CSS は ::after と ::before を巧みに使用して垂直カテゴリー ナビゲーションを実装します
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • CSSは::afterを巧みに使用してタブ切り替えアニメーションを実現します
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter イニシャル

  <p>很久很久以前</p>
  <p>Long long ago</p>
  1
  2

  p::first-letter {
    font-size: 2em;
    color: red;
  }
  1
  2
  3
  4

  

  ::first-line 最初の行

    <div style="width: 120px">
      <p>很久很久以前，有一个白发苍苍的老人</p>
    </div>
  1
  2
  3

  p::first-line {
    color: red;
  }
  1
  2
  3

  

  ::selection マウスをドラッグして領域を選択します

  <p>很久很久以前，有一个白发苍苍的老人</p>
  1

  p::selection {
    color: red;
    background-color: yellow;
  }
  1
  2
  3
  4

  

  ::placeholder テキストプレースホルダー

  <input placeholder="请输入" />
  1

  /* input 不写，则会选中页面所有元素的占位符 */
  input::placeholder {
    color: red;
  }
  1
  2
  3
  4

  

  関係セレクター

  要素間の関係に基づいて要素を選択する

  子孫セレクター >

  タグ内にラップされた第 1 レベルのタグはその子孫です

  <div>
      <p>我是div的儿子</p>
  </div>
  1
  2
  3

  div>p{
    color:red;
  }
  1
  2
  3

  子孫セレクター 空格

  タグ内のすべてのタグはその子孫です

    <div class="parent">
      <p class="red">我是子代（属于后代）</p>
      <p>我是子代（属于后代，但没有 .red）</p>
      <div>
        <div class="red">我是孙代（也属于后代）</div>
      </div>
    </div>
  1
  2
  3
  4
  5
  6
  7

  /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
  .parent .red {
    color: red;
  }
  1
  2
  3
  4

  

  兄弟セレクター ~

  同じ親要素の下で、指定された要素を選択します後すべての要素は同じレベルなので、厳密に言えば、 后面兄弟选择器

  <div>
    <button>按钮1(不会变红)</button>
    <p>段落</p>
    <button>按钮2（会变红）</button>
  </div>
  1
  2
  3
  4
  5

  p ~ button {
    color: red;
  }
  1
  2
  3

  

  CSS いいえ 前面兄弟选择器 、以下のリンクを参照して実装をシミュレートできます。
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  近隣兄弟セレクター +

  要素の直後にある次の要素を選択します

    <div class="parent">
      <p>段落</p>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  1
  2
  3
  4
  5

  p + button {
    color: red;
  }
  1
  2
  3

  

  交差点セレクター

  同時に複数のセレクターに一致するページ上の要素を選択します

  • セレクター間にスペースはありません (スペースは子孫セレクターです)
  • タグ セレクターが存在する場合は、タグ セレクターを最初に配置する必要があります

      <p class="red">很久很久以前1</p>
      <p>很久很久以前2</p>
  1
  2

  /* 选中 p 标签中class值含 red 的元素 */
  p.red {
    color: red;
  }
  1
  2
  3
  4

  

  ユニオンセレクター ,

  複数のセレクターのうち、いずれか 1 つが満たされていれば、そのセレクターが選択されます。

  • 複数のセレクター間で使用されます , 別

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  1
  2
  3

  .error,
  .important {
    color: red;
  }
  1
  2
  3
  4