如何在css中隐藏带有ID和Class的div中没有​​ID的?

时间:2023-01-13 17:54:38

This is so frustrating, I'm trying to hide an specific paragraph, but it doesn't have an ID:

这太令人沮丧了,我试图隐藏一个特定的段落,但它没有ID:

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

As you can see, there is no ID for P. I already tried like this:

如您所见,P没有ID我已经尝试过这样:

#form-2 p {
display: none;
}

But it is hiding all the paragraphs. Also tried using the class, same result.

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

PS: Need to hide Some text 1

PS:需要隐藏一些文字1

and leave Some text 2

6 个解决方案

#1


2  

you can use the nth-child selector (or just first-child / last-child selector) you can use as well the nth-of-type selector (or just the first-of-type / last-of-type selector)

你可以使用nth-child选择器(或者只是第一个子/最后一个子选择器),你也可以使用nth-of-type选择器(或者只是第一个类型/最后一个类型的选择器)

here is a few snippets based on yours

这里有一些基于你的片段

first-child

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

last-child

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

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

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

#2


3  

You can do this with first-child.

你可以用第一个孩子做到这一点。

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

Here is a JSFiddle

这是一个JSFiddle

#3


3  

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

#4


2  

Try this #form-2 p:first-child

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

#5


2  

You can do nth-child(1), nth-child is used for an arbitrary child. If you happen to just want to hide the first <p> then you can use :first-child.

你可以做nth-child(1),nth-child用于任意的孩子。如果您碰巧只想隐藏第一个

,那么您可以使用:first-child。

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

#6


1  

You need to select first p tag using :first-child

您需要使用:first-child选择第一个p标签

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

#1


2  

you can use the nth-child selector (or just first-child / last-child selector) you can use as well the nth-of-type selector (or just the first-of-type / last-of-type selector)

你可以使用nth-child选择器(或者只是第一个子/最后一个子选择器),你也可以使用nth-of-type选择器(或者只是第一个类型/最后一个类型的选择器)

here is a few snippets based on yours

这里有一些基于你的片段

first-child

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

last-child

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

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

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

#2


3  

You can do this with first-child.

你可以用第一个孩子做到这一点。

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

Here is a JSFiddle

这是一个JSFiddle

#3


3  

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

#4


2  

Try this #form-2 p:first-child

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

#5


2  

You can do nth-child(1), nth-child is used for an arbitrary child. If you happen to just want to hide the first <p> then you can use :first-child.

你可以做nth-child(1),nth-child用于任意的孩子。如果您碰巧只想隐藏第一个

,那么您可以使用:first-child。

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

#6


1  

You need to select first p tag using :first-child

您需要使用:first-child选择第一个p标签

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