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

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小提琴演示.

这将隐藏第四个p元素,而不是第四个子元素(这在HTML中是重要的,因为它是p第五个子元素).

并且,只是为了演示为什么:nth-child()是错误的选择器,这是一个演示使用p:nth-child(4):JS Fiddle演示的演示.

顺便说一句,如果那是包含a的唯一元素label(form假设元素嵌套在一个似乎不太可能的假设中),你也可以使用IE友好的选择器:

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小提琴演示.

参考文献:

• :nth-of-type().