Question

是否可以选择第4个<p>标记并在下面的代码中使用CSS隐藏它？（它没有类属性也没有id）

<form id="registerform" name="registerform" action="http://localhost/wordpress/wp-login.php?action=register" method="post">
   <p></p>
   <p></p>
   <style></style>
   <p></p>
   <p> //this tag
    <label>
      gen_code
      <br>
      <input id="gen_code" class="input" type="text" name="gen_code" value="" size="25" tabindex="20" style="font-size: 20px; width: 97%; padding: 3px; margin-right: 6px;">
    </label>
   </p>  
   <p class="submit"></p>
</form>

Answer 1

我建议：

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

JS Fiddle demo

这将隐藏第四个p元素，而不是第四个子元素（这在HTML中，p是第五个孩子）很重要。

而且，为了说明为什么:nth-child()是错误的选择器，这里是一个演示p:nth-child(4)：JS Fiddle demo使用的演示。

顺便说一句，如果这是唯一包含label的元素（考虑到元素嵌套在form中似乎是不太可能的假设），您还可以使用IE友好的选择器：< / p>

p {
    /* removes the visible-space left by empty p elements */
    padding: 0;
    margin: 0;
}

p > label {
    /* hides the label element, and its contents */
    display: none;
}

JS Fiddle demo

参考文献：

:nth-of-type()。

Answer 2

使用nth-of-type：http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

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

Answer 3

如果您需要支持IE7-8，您也可以使用基于普通兄弟选择器的这个（丑陋:)快速解决方法：

form p ~ p ~ p ~ p {
    display: none;
}

form p ~ p ~ p ~ p ~ p {
    display: block;
}

Answer 4

您可以像其他人建议的那样使用:nth-of-type()，或者尝试:nth-child()。

以下是:nth-child()示例：

#registerform p:nth-child(4n) { display: none; }

Answer 5

容纳较旧的浏览器

David Thomas的答案非常适合任何支持CSS3的浏览器（并且值得接受答案）。但是，为了一些完整性，IE7-8支持可能会关闭<style>这样的元素（这也可以在以后的浏览器中使用）：

form style + p + p {
    display: none;
}

这显然假定您发布的结构。 Here is a fiddle

如何用css选择特定标签的第n个孩子？

5 个答案:

容纳较旧的浏览器