content生成内容无法影响:empty伪类实例页面

展示

代码

• HTML：

  <h4>有内容</h4>
  <div class="box">有内容</div>
  <h4>无内容</h4>
  <div class="box"></div>
  <h4>空格也算内容</h4>
  <div class="box"> </div>
  <h4>伪元素不算内容</h4>
  <div class="box pseudo"></div>

• CSS：

  .box { 
      width: 216px; 
      padding: 10px; 
      border: 10px solid #cd0000; 
      margin: auto; 
  }
  .box:empty { 
      border-style: dashed; 
  }