为空元素应用CSS，包括空格和注释

Question

我正在尝试为空div元素应用一些样式，包括div只有注释或空格。

我的HTML结构如下。

<div id="test">
    <div>Some content inside is there</div>
    <div></div>
    <div><!--This is treating as empty--></div>
    <div>   </div>
    <div>
      <!--This also should treat as empty-->
    </div>
</div>

我曾尝试使用伪类:empty，但它只针对第2和第3个元素。我知道我们可以使用javascript来实现这一目标。有没有只使用CSS的解决方案？

div:empty {
  border:1px solid #ccc;
  height:20px;
}

<div id="test">
    <div>Some content inside is there</div>
    <div></div>
    <div><!--This is treating as empty--></div>
    <div>   </div>
    <div>
      <!--This also should treat as empty-->
    </div>
</div>