css3の:empty疑似要素が効かない罠

先生！どうしてもcss3の:empty疑似要素が効きません！どうして！

HTML

<body>
    <div class="test">
    </div>
    <div class="test">
        I will be pink.
    </div>
</body>

CSS3

.test {
  background: pink;
  height: 80px;
  width: 80px;
}

.test:empty{
  background: lime;
}

それはね…余計な改行とスペースが入っているからだよ！！

正しく動作するHTMLはこちら。

<body>
    <div class="test"></div>
    <div class="test">
        I will be pink.
    </div>
</body>

些細だけど、大切。デリケートな子だからね。

(kassyi@C#er).Blog;