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

Posted 2023-03-06

【中文标题】:empty 选择器在@media print 中不起作用 [重复]

【英文标题】：:empty selector not working in @media print [duplicate]

【发布时间】：2020-03-31 01:35:22

【问题描述】：

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

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

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

【参考方案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>