Question

我知道一个空div不是 hmmm 完全是语义的。但我想知道是否可以将它与背景图像一起使用来创建一个漂亮风格的阴影或其他效果来装饰'父'div。

（我也知道如何用CSS3做到这一点，但由于显而易见的原因，这并不总能做到这一点）

Answer 1

它可能不是好的样式，但从技术上讲，添加空div元素是有效的。

由于div不会添加或更改任何含义，因此使用空div不会干扰文档的语义。

当然，您应该使用CSS提供背景图像，而不是使用img元素。

但是，您可以使用CSS伪元素after和before来实现所需的去除吗？

Answer 2

如果你想让html保持尽可能干净，那么最好的办法就是，好吧......不要管它并使用CSS。怎么样？ CSS为您提供了一种方法，通过两个特殊的选择器将[伪]元素添加到html中：after和：before。看看这个小提琴：http://jsfiddle.net/joplomacedo/ubG5t/

css，如果你在小提琴中看不到它，看起来如下：

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

没有太大的意义。它的作用是插入body元素的最末端（仍在其中），一个带有块显示的[伪]元素 - 就像div一样。无论你喜欢什么样的风格，你都可以给它 - 再次，它就像有一个普通的div [1 *]

内容就是让它发挥作用。你可以在里面放一些文字，它会显示在方框内，或者你可以像我一样把它留空 - 但它需要在那里，否则，没有div为你。

* 1 - 好吧，过渡并没有真正起作用，但除此之外......

Answer 3

<style>
.element div:empty{
    background: #red;
    height:15px;
    width:15px;
} 
</style>


<div class="element">
<div>not empty</div>
<div></div>
</div>

语义：背景图像的空div

3 个答案: