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

时间:2013-07-01 14:27:31

标签: css css-selectors

是否可以选择第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>

5 个答案:

答案 0 :(得分:9)

我建议:

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

参考文献:

答案 1 :(得分:3)

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

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

答案 2 :(得分:2)

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

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

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

答案 3 :(得分:1)

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

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

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

答案 4 :(得分:1)

容纳较旧的浏览器

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

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

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