html - 不能使用 first-child css 来设置显示

Question

我正在使用 wordpress 及其生成的代码:

<aside class="left-hand-column">
 <div class="textwidget">
  <p></p> ...1
   <div class="pdf-download">
    <p> ... 2
     <a href="http://www.kusuma.ee-web.co.uk/wp-content/uploads/2016/04/strategy2015-2018.pdf" target="_blank">download pdf</a>
    </p>
   </div>
  <p></p> ...3
 </div>
</aside>

我想删除 <p></p> 的影响标签对。

我想我可以像这样为他们设置 display:none:

.textwidget p:first-child {
    display:none;
}

但是它使 1 和 2 p 消失并留下 3 - 请问我怎样才能让它做我需要的事情？

Answer 1

您可以删除 .textwidget 的直接后代 p:

.textwidget > p {
    display:none;
}

您可以改为删除 :empty 段落标签:

.textwidget p:empty {
    display:none;
}