1

是否可以在下面的代码中选择第 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>
4

5 回答 5

9

我建议：

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

JS 小提琴演示。

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

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

顺便说一句，如果这是唯一包含 a 的元素label（考虑到元素嵌套在 aform似乎不太可能的假设），您还可以使用 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 小提琴演示。

参考：

于 2013-07-01T14:30:55.540 回答
3

使用第 n 个类型：http ://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

form p:nth-of-type(4) {  
  display: none;
}
于 2013-07-01T14:28:53.230 回答
2

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

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

form p ~ p ~ p ~ p ~ p {
    display: block;
}
于 2013-07-01T14:56:16.043 回答
1

适应旧版浏览器

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

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

这显然假设了您发布的结构。这是一个小提琴。

于 2013-07-01T19:46:48.137 回答
1

您可以:nth-of-type()按照其他人的建议使用 ，或尝试:nth-child().

这是一个:nth-child()例子：

#registerform p:nth-child(4n) { display: none; }
于 2013-07-01T14:50:52.210 回答