：空のセレクタがCSSで動作していません

Question

.errorクラスの:emptyセレクタを使用しました。問題は、エラーのクラスでdiv内にコンテンツがない場合でも、エラークラスは完全には削除されないということです。 Firebugでテストしたところ、divにはまだ空白があり、余分なスペースを削除するとdivが消えてしまいました。

.error{ border:solid 1px #ff0000; color:#ff0000;} 
.error:empty{ display:none;} 

divがデバッグを次のように示しています

<div class="error">  </div> 

ご覧の余分なスペースが問題であること。 表示するCSSに を表示する方法はありますか？ plsヘルプ。

Answer 1

<div class="error"> </div>（demo）は空ではないため、子としてテキストノードがあります。

:empty

：空の擬似クラスは すべての子を持たない任意の要素を表しています。要素ノードとテキスト（空白を含む）のみが考慮されます。 コメントまたは処理の指示は、要素が空であるとみなされるかどうかに影響しません（ ）。

てみ

<div class="error"></div> 

デモ：Fiddle