如何在css中隐藏没有ID、有ID和类的div中的<p>？

Question

这是如此令人沮丧，我试图隐藏一个特定的段落，但它没有ID：

<div id="form-2" class="widget widget-box w-widget">
<p style>Some text 1</p>
<p style>Some text 2</p>
</div>

如您所见，没有P的ID，我已经尝试过这样做了：

#form-2 p {
display: none;
}

但它隐藏了所有的段落。也尝试使用类，同样的结果。

PS:需要隐藏一些文本1

留下一些文字2

​

​

Answer 1

您可以使用nth-儿童选择器(或仅使用第一个孩子 / 最后一个孩子选择器)，也可以使用nth of型选择器(或仅使用第一类型 / 最后一种选择器)。

这里有一些基于你的片段

第一个孩子

​

#form-2 p:first-child {display:none}

<div id="form-2" class="widget widget-box w-widget">
  <p>Some text 1</p>
  <p>Some text 2</p>
</div>

​

最后一个孩子

​

#form-2 p:last-child {display:none}

<div id="form-2" class="widget widget-box w-widget">
  <p>Some text 1</p>
  <p>Some text 2</p>
</div>

​

nth-儿童

​

#form-2 p:nth-child(3) {display:none}

<div id="form-2" class="widget widget-box w-widget">
  <p>Some text 1</p>
  <p>Some text 2</p>
  <p>Some text 3</p>
  <p>Some text 4</p>
  <p>Some text 5</p>
</div>

​

nth of型

​

#form-2 p:nth-of-type(4) {display:none}

<div id="form-2" class="widget widget-box w-widget">
  <p>Some text 1</p>
  <p>Some text 2</p>
  <p>Some text 3</p>
  <p>Some text 4</p>
  <p>Some text 5</p>
</div>

​

Answer 2

您可以使用first-child来完成这个任务。

#form-2 p:first-child {
display: none;
}

这是一个JSFiddle

Answer 3

#form-2 > p:first-of-type {
    display: none;
}