HTML 5での擬似要素の運用

昔から偽の要素を使っていました
その時の役割はハイエンドブラウザで「クリアフローティング」を演じることだけだった.
.clearfix:after{content:”";display:block;height:0;line-height:0;visibility:hidden;clear:both;}
そして彼が「浮動を清める」ことができることを知っているだけだ.
しかし今、私の心の中で伪りの要素は无敌になって、《火影忍者》の中の主役の鸣く人の影の分身术のようで、1つの本体、2分身を整えて出てきて、それでは地主と戦うことができます.
 
知識が普及する
擬似要素には、次の4つのグループがあります.
:first-line
:first-letter
:before
:after
本文は主にbefore:after、以下の“偽元素”は特にこの2つの偽元素を指します
擬似要素は影分身術と同じように、主役の前(before)、後ろ(after)に擬似要素を作成するので、chrome開発ツール、Firebugでは見つけられません.
擬似要素の主な機能は装飾的な役割を果たし、可用性を向上させ、サポートされていないブラウザでエラーが表示されません.
IE 6 IE 7はサポートされていません.IE 8は少量サポートされていません.
 
構文
擬似要素がcontentプロパティを設定しないと有効になりません
:beforeと::beforeの書き方に違いはありません.簡単に言えば、この2つの文法には違いはありません.ただ、偽クラス(単一コロン)とCSS 3の偽要素(二重コロン)を区別するためです.
擬似要素の階層関係
 
疑似要素はデフォルトでは、親要素の部分の属性を継承します.
擬似要素を絶対的に位置決めすると、階層順位は、1位after、2位before、3位要素自体である.(階層関係を変更するプロパティはまだ見つかっていません)
IE 8文字の前置き、要素文字を隠すことができない
 
 
擬似要素の実用化
ユーザーエクスペリエンスの向上
例えば、流れの中で重要な画像ボタンがあり、この画像ボタンがなければ次のボタンはできないので、私たちは彼らの体験にもっと注目します.
画像をロードする前に(または画像をロードしない)、彼は次のようにします.
画像をロードすると、彼はこうなりました.
 
影が分身する前に、私たちはこのように書くかもしれません.
html:

ゲームを める

css:

.bt_gm_play { 
display:block; 
width:155px; 
height:48px; 
margin:5px auto; 
position:relative; 
font:bold 22px/48px Microsoft YaHei, Tahoma; 
color:#f66200; 
text-align:center; }
.bt_gm_play s { 
display:block; 
width:155px; 
height:48px; 
position:absolute; 
left:0;
top:0; 
background:url(http://www.3366.com/img/portal/v2/middle/mid_intro_spt.png) 0 0; }
.bt_gm_play:hover s { 
background-position:0 -52px; 
cursor:pointer; }

影が後ろに分かれているので、私たちはこのように書くことができます.
html:

ゲームを める

css:

.bt_gm_play_wei { 
display:block; 
width:155px; 
height:48px; 
margin:5px auto; 
position:relative; 
font:bold 22px/48px Microsoft YaHei, Tahoma; 
color:#f66200; 
text-align:center;  
*background:url(http://www.3366.com/img/portal/v2/middle/mid_intro_spt.png) 0 0;
*text-indent:-9999px
}
.bt_gm_play_wei:before { 
content:""; 
display:block; 
width:155px; 
height:48px; 
position:absolute; 
left:0; 
top:0; 
background:url(http://www.3366.com/img/portal/v2/middle/mid_intro_spt.png) 0 0; }
.bt_gm_play_wei:hover,  .bt_gm_play_wei:hover::before {background-position:0 -52px;cursor:pointer;}

変わったのはラベルが1つ足りないだけだが、SEOがあり、深刻な潔癖な再構築同級生にはよく改善されている.
PNG 24ピクチャ重畳、漸進的増強
偽要素の追加は、1つのラベルに両手を伸ばすことで、ページをより生き生きとさせることができます.