コーススケジュール

CSS基本的なチュートリアル

CSS中級チュートリアル

CSS 疑似要素

擬似要素の概念
擬似要素の機能
擬似要素の種類

1. 擬似要素の概念

CSS がドキュメントをレンダリングするとき、疑似要素は CSS を通じて HTML に要素 (タグと呼ばれる) を追加できますが、この要素はドキュメントツリーでは見つかりません。擬似要素はCSSスタイルとして表示され、使い方は通常の要素と同じです。

2. 擬似要素の機能

利点:

DOM ノードを占有しないため、DOM ノードの数が減ります。
CSS を使用して JavaScript の問題を解決し、開発を簡素化しましょう。
無意味なページ要素の追加は避けてください。

欠点:

デバッグには適していません。
擬似要素は実際にはドキュメントのコンテンツに反映されるのではなく、視覚効果にのみ反映されるため、擬似要素に実用的なコンテンツを追加することはできません。また、コンテンツのこの部分はクロールされません。サーチエンジン。

3. 擬似要素の種類

注: W3C 仕様によれば、IE8 以下のブラウザとの互換性に関係なく、 擬似クラスは単一のコロン (hover、:visited など) を使用し、擬似要素は二重コロンを使用します

3.1 ::before和::after

::before および ::after は、選択した要素にコンテンツを挿入し、要素の既存のコンテンツの前 (後) に、挿入するコンテンツを指定するために content 属性を使用する必要があります。
デフォルトでは、コンテンツはドキュメントフローから切り離されず、実際の要素スペースを占有します。選択した要素との絶対位置決めは、positioning によって実現できます。

機能:

デフォルトの disp@lay: inl@ine;
content 属性を設定する必要があります。設定しないとすべてが役に立ちません。
デフォルトでは、user-select: none、::before、::after の内容は、ユーザーがマウスを長押ししてスライドさせても選択できません。
元の要素の CSS プロパティ (元の要素の色など) を継承します。

  <div>大家好，我是div <div>

div{
  color:red
}
div::before{
    content:"我是 before";
}
div::after{
    content:"我是 after";
}

アプリケーションシナリオ:

::before と ::after は、さまざまな補助効果を実現するために、content 属性と組み合わせてよく使用されます。次に、いくつかの典型的なシナリオを示します。

(1) 浮き上がりの影響を解消（高さ崩れの問題を解決）

 
.clear::after{
      clear: both;
      content:'';
      display: block;
}

フローティング要素の親要素にクリアクラスを追加します (このメソッドが適用される親要素の子要素はフローティング要素である必要があることに注意してください。非フローティング要素が混在している場合、フローティング効果は完全にはクリアされません)。フローティング効果はクリアされます。この方法では、フローティングをクリアするために新しいラベルを作成する必要はありません。

(2) @font-face と連携してフォントアイコンを実現します

(3) 画像生成を実現する

content 属性の url() 関数を使用して画像を生成します。例:

a::before{
   content: url("https://www.google.com/logos/doodles/2018/world-cup-2018-day-19-6211393811382272.3-law.gif");
}

実際のプロジェクトでは、url() メソッドによって生成される画像はそれほど多くありません。これは主に、このメソッドでは画像のサイズを制御するのが難しく、幅と高さを設定しても画像の固有のサイズを変更できないためです。通常は、background-image 属性によってよりシミュレートされます。

div::before{
  content:"";
  background-image: url("test1.jpg");
  display: inline-block;
  width: 100px;
  height: 100px;
}

(4) カウンターを実現

content 属性の counter() メソッドにより、リスト要素を使用せずにシリアル番号機能を実現できます。

counter は、counter-increment 属性および counter-reset 属性とともに使用する必要があります。

counter-reset は、同じレベルの要素にカウンターを追加します。たとえば、ページに複数の H1 要素がある場合は、本文にカウンターを追加します。 H1 要素内に複数の H2 要素がある場合は、H1 要素にカウンタを追加します。
カウンタインクリメントはカウンタ値を増加させます。

例:

<body>
<h1>哺乳动物</h1>
<h2>狗</h2>
<h2>猴子</h2>
<h2>猩猩</h2>
<h1>冷血动物</h1>
<h2>鱼</h2>
<h2>蛇</h2>
</body>

   
body{
    counter-reset: section;
}
h1{
    counter-reset:subsection;
}
h1::before{
    counter-increment: section;
    content:counter(section)'、';
}
h2:before{
    counter-increment: subsection;
    content: counter(section)'.'counter(subsection)'、';
}

3.2 ::first-line および ::first-letter

::first-line: ブロックレベルの要素にのみ使用できます。添付された要素の最初の行のコンテンツのスタイルを設定するために使用されます。使用可能な CSS プロパティは、font、color、background、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear です。

:first-letter: ブロックレベルの要素にのみ使用できます。下位要素の最初の文字のスタイルを設定するために使用されます。使用可能な CSS プロパティは、font、color、background、marin、padding、border、text-decoration、vertical-align、text-transform、line-height、float、clear です。

これら 2 つの疑似クラスが適用される頻度はそれほど高くありません。

3.3 ::selection

::selection: マウスを長押ししてドラッグして選択したコンテンツと一致します。使用可能な CSS プロパティは背景、色です

<san>士大夫士大夫胜多负少</span>
span::selection{
    color: red;
}

3.4 ::placeholder

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

注:::placeholder 疑似要素は、IE および Edge ブラウザではまだサポートされていません

CSS 疑似クラスなし