CSS_html/css_WEB-ITnose の :after と :before の機能は何ですか-htmlチュートリアル-php.cn

CSS_html/css_WEB-ITnose の :after と :before の機能は何ですか

WBOY

リリース： 2016-06-24 11:41:18

オリジナル

1673 人が閲覧しました

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