:empty 选择器在@media print 中不起作用 [重复]答案

【问题标题】：:empty selector not working in @media print [duplicate]:empty 选择器在@media print 中不起作用 [重复]
【发布时间】：2020-03-31 01:35:22
【问题描述】：

我在 Twig 的 symphony 上工作，并且有一个空 div，应该在打印模式下隐藏。

<div class="form-fields__list">
</div>

问题是屏幕上的 :empty 选择器工作得很好，但在打印模式下被忽略了。甚至试图将上面提到的块包装在 {% spaceless %} 块中，以删除任何可能的空格。任何人都知道为什么会发生这种情况？

【问题讨论】：

标签： css printing media-queries selector

【解决方案1】：

:empty 伪选择器将选择不包含任何内容或仅包含 HTML 注释的元素。

将匹配

<div></div>

<div><!-- test --></div>

不匹配

<div> </div>

<div>
  <!-- test -->
</div>

<div>
</div>

.container {
  margin: 40px auto;
  max-width: 700px;
}

@media print {
  p:empty {
    background-color: linen;
    padding: 15px;
  }
}

.pseudo::before {
  content: "I am a piece of generated content inside a paragraph. The paragraph is still considered empty and gets a background color.";
}

<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, in, odit autem tempora fuga neque quos expedita repudiandae labore iure. Rem, blanditiis natus unde nisi explicabo odio pariatur maxime earum.
  </p>
  <p></p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, tempora, ratione ad distinctio iusto illum accusamus qui porro inventore commodi voluptates tenetur dolor sed harum excepturi nemo aperiam beatae sint!
  </p>
  <p class="pseudo"></p>
  <p>
    <!-- COMMENT HERE -->
  </p>
  <p></p>
</div>

【讨论】：