如何使用CSS选择特定标签的第n个子代? [英] How to select nth child of specific tag with css?

问题描述

是否可以选择第4个<p>标记并在下面的代码中使用CSS将其隐藏? (它既没有class属性，也没有id)

Is it possible to select the 4th <p> tag and hide it with CSS in the code below? (It has neither class property nor 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>

推荐答案

我建议:

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

JS小提琴演示.

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

This will hide the fourth p element, rather than the fourth-child (which is important as, in your HTML, the p is the fifth-child).

并且，为了演示为什么:nth-child()是错误的选择器，这是一个演示p:nth-child(4)用法的演示: JS小提琴演示.

And, just to demonstrate why :nth-child() is the wrong selector, here's a demo showing the use of p:nth-child(4): JS Fiddle demo.

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

Incidentally, if that's the only element that contains a label (which, given that the elements are nested within a form seems an unlikely assumption), you could also use IE-friendly selectors:

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() .

这篇关于如何使用CSS选择特定标签的第n个子代?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！