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

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

例:

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

例:

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

概要:

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

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