如何在CSS中选择内部无任何元素的div并为其设置样式

完全可以实现，你可以使用CSS内置的:empty伪类选择器完成需求。

实现原理 #

:empty选择器会精准匹配没有任何子节点的元素，子节点包含元素节点、文本节点（哪怕是空格、换行符也会被判定为有内容），刚好匹配你给出的完全无内容的div场景。

示例代码 #

针对你给出的HTML结构，直接使用如下CSS规则即可选中最后四个空div：

/* 匹配所有完全为空的div */
div:empty {
  /* 这里写你需要的样式，举个示例： */
  width: 50px;
  height: 50px;
  background: #f00;
  margin: 8px 0;
}

注意事项 #

如果你的空div内部不小心带了空格、换行，比如写成<div> </div>，:empty不会匹配这类元素。如果需要匹配仅包含空白字符的元素，可以使用CSS4新增的:blank伪类，不过目前该特性浏览器支持度较低，生产环境优先使用:empty即可。

内容的提问来源于stack exchange，提问作者theProCoder