ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose の :after と :before の機能は何ですか
CSS_html/css_WEB-ITnose の :after と :before の機能は何ですか
- WBOYオリジナル
- 2016-06-24 11:41:181582ブラウズ
CSS の :after および :before の機能は何ですか:
現在のページ レイアウトでは、IE のバージョンが低いため、:after および :before 擬似オブジェクト セレクターの使用頻度はそれほど高くないようです。ブラウザはこれをサポートしていませんが、クリアフロートまたはその他の関連レイアウトでも使用されます。ただし、下位バージョンのブラウザの使用が減少するにつれて、その頻度もそれに応じて増加するはずです。これら 2 つの疑似オブジェクト セレクターの使用法を簡単に紹介します。まずコード例を見てみましょう。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> div:before{ content:"添加的内容"; } </style> </head> <body> <div>|div原来的内容</div> </body> </html> 上記のコードは、指定されたコンテンツを div 要素の内部フロントエンドに追加できます。もちろん、before 擬似オブジェクト セレクターは content 属性と組み合わせて実装されます。
文法構造:
E:before{ Rules }E::before{ Rules } E は、セレクターによって一致する要素を表します。例:
div:before.first:before#mytest:before
文法には 2 つの文法形式があることがわかります。1 つは before の前に「:」が付いています。 、もう 1 つは、前の前に 2 つの「:」があり、1 つ目は CSS2 で記述され、2 つ目は CSS3 で記述されます。 IE7 および IE7 より前のブラウザは CSS2 の書き込みをサポートしていません。また、IE8 より前のブラウザは CSS3 の書き込みをサポートしていません。 :before 擬似オブジェクト セレクターは通常、指定された一致要素内のフロント エンドに指定されたコンテンツを追加するために content 属性と組み合わせて使用されます。 :after 擬似オブジェクト セレクターの使用は、:before の使用と同じであるため、導入されません。
元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/507.html