如何在css？</p>中隐藏带有ID和Class的div中没有​​ID的<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

您可以使用first-child执行此操作。

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

这是JSFiddle

Answer 2

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

Answer 3

试试这个#form-2 p:first-child

Answer 4

您可以nth-child(1)，nth-child用于任意儿童。如果您只是想隐藏第一个<p>，那么您可以使用:first-child。

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

Answer 5

您可以使用nth-child选择器（或仅first-child / last-child选择器），也可以使用nth-of-type选择器（或仅first-of-type} / last-of-type选择器）

这里有一些基于你的片段

第一子

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

最后子

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

第n个孩子

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

第n的型

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 6

您需要使用p

选择第一个:first-child代码

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