2

空のdivは完全に意味のあるものではないことを私は知っています。しかし、背景画像と一緒に使用して、「親」divを装飾するための適切なスタイルのドロップシャドウまたはその他の効果を作成してもよいかどうか疑問に思いました。

（CSS3でこれを行う方法も知っていますが、明らかな理由から、これで常にうまくいくとは限りません）

4

3 に答える 3

4

良いスタイルではないかもしれませんが、技術的には空のdiv要素を追加することは有効です。

div意味を追加または変更しないため、空を使用divしてもドキュメントのセマンティクスに干渉することはありません。

もちろん、img要素ではなくCSSで背景画像を提供する必要があります。

ただし、CSS疑似要素afterを使用して、before代わりに目的のデオケーションを実現できる可能性がありますか？

于 2012-09-15T23:38:56.060 に答える
1

htmlをできるだけきれいにしたい場合は、それをそのままにしてCSSを使用するのが最善の方法です。どのように？CSSは、2つの特別なセレクター：afterと：beforeを使用して[pseudo]要素をhtmlに追加する方法を提供します。このフィドルを見てください：http：//jsfiddle.net/joplomacedo/ubG5t/

cssは、フィドルで表示されない場合、次のようになります。

body:after {
  content: " ";
  display: block;
  /* your styles */
}

それほど多くはありません。それが行うことは、body要素の最後（まだその中にある）に、ブロックの表示を備えた[疑似]要素を挿入することです-ちょうどdivのように。好きなスタイルでそれを与えることができます-繰り返しますが、それは通常のdivを持っているのと同じです[1 *]

コンテンツはそれを機能させるためにあります。ボックスに表示されるテキストをその中に入れることも、私が行ったように空のままにすることもできますが、そこにある必要があります。そうでない場合は、divはありません。

* 1-ええと、トランジションは実際には機能しませんが、それを除けば...

于 2012-09-16T00:19:37.437 に答える
0 
<style>
.element div:empty{
    background: #red;
    height:15px;
    width:15px;
} 
</style>


<div class="element">
<div>not empty</div>
<div></div>
</div>
于 2016-02-12T09:20:09.053 に答える