CSS 属性の使用:before && :after、疑似クラスと疑似要素の違い_html/css_WEB-ITnose

1: :before && :after 使用法

:before

疑似要素の名前と同様、:before は、指定された要素のコンテンツの前に新しいコンテンツを挿入するために使用されます。例:

.before:before{content:'you before'; color:red;} <div class="before"> me</div>

ここでは、属性コンテンツを疑似要素 :before に追加し、それに以前の値を割り当てます。効果を見てみましょう:

//指定された要素のコンテンツの前に新しいコンテンツが追加されます

新しいコンテンツ領域のデフォルトの表示属性値がここに追加されることを見つけるのは難しくありません。疑似要素 :before がインラインである場合、新しいコンテンツ領域のプロパティを変更できますか? 答えは「はい」です。他の要素を変更するのと同じように、そのスタイルを変更できます。表示属性値を block に変更しましょう。

.before:before{content:'you before'; display:block; color:red;} <div class="before"> me</div>

それでは、その効果を見てみましょう:

//疑似要素 :before によって生成された新しいコンテンツ領域は、確かにブロック要素になりました

content 属性

のための擬似要素 要素 :before :after と同様に、属性の値は文字列または画像を指す URL などの他の形式で設定できることがわかっています。 疑似クラスで使用する

疑似要素 :before は疑似クラスでも使用できます。例として :before でよく使用される疑似クラス :hover を示します。

 content: url( "img/icon.png" )

value 関数と一緒に使用します。 attr()

もう 1 つのより一般的な使用法があります。つまり、次のような値関数 attr() と一緒に使用されます。

.before:hover:before{content:'you before'; color:red;} <div class="before"> me</div>

達成される効果は次と同じです:

a::before{content: attr(title)} <a href="http://www.segmentfault.com" title="专业面向开发者的中文技术问答社区"></a>

: after

疑似要素 :after は疑似要素 :before と同じ型を持ちます。指定された属性内容の値が、指定された要素の内容の後に表示され、省略されるだけです。

2: 疑似クラスと疑似要素の違い

疑似クラスの型

疑似要素の型

疑似クラス: オブジェクトは要素全体

例:

<a href="http://www.segmentfault.com">专业面向开发者的中文技术问答社区</a>

これらの条件は DOM ベースではありませんが、結果はそれぞれ、リンク全体、段落、div などの完全な要素に適用されます。

疑似要素: 要素の一部に作用します

例:

a:link {color:#111}a:hover {color:#222}div:first-child {color:#333}div:nth-child(3) {color:#444}

疑似要素は、要素の一部 (最初の行または段落の最初の文字) に作用します。

概要:

疑似要素は、実際には要素を鍛造することと同等です。たとえば、最初の文字によって達成される効果は、要素を鍛造し、それに対応する効果を追加することです。たとえば、first-child は子要素にスタイルを追加するだけです。

疑似要素と疑似クラスが混同しやすいのは、その効果が似ていて書き方が似ているからですが、実は両者を区別するために CSS3 では明確に規定されています。疑似クラスはコロンで表され、疑似要素は 2 つのコロンで表されます。

しかし、互換性の問題により、ほとんどの場合でも単一のコロンが使用されています。ただし、互換性の問題に関係なく、書くときに良い習慣を身につけ、この 2 つを区別するように最善を尽くす必要があります。

著者: 嵐の後に虹を見ましょう

出典: http://www.cnblogs.com/moqiutao/

この記事があなたの研究に役立つと思われる場合は、サポートとサポートをお願いします奨励する。