css 利用 :not(:empty) 找出有子元素

参考：CSS 为没有内容的元素设置样式 :not(:empty)

我们有时会想将有子元素和无子元素的不同样式显示，所以就有了这篇资料

Html

<div class='box'></div>
<div class='box'>纯文本</div>
<div class='box'><button>内置button</button></div>
<div class='box'><span>内置span</span></div>
<div class='box'>前置<span>文本 + span</span></div>

CSS

div{
  display: block;
  width: 200px;
  height: 30px;
  margin: 5px;  
}

/*无内容*/
div.box:empty{
  /*display:none;*/
  border: 1px solid red;  
}

/*有内容*/
div.box:not(:empty){
  border: 1px solid blue;
}

效果图