css - CSS - 如何选择表单元素的第 n 个子元素？

Question

我正在尝试重新设计我的 WP 网站的注册表单。我还添加了一些额外的字段。我增加了<form>容器的宽度并将<input>字段的流向左。但是我想将电话字段（它是元素的第三个子<form>元素）的流设置为 none 即float: none;。我尝试这样做：form:nth-child(3) {float: none;}但它似乎不起作用。它选择表单而不是表单的第三个字段。怎么了？

这是我网站的注册页面。请帮忙。

Answer 1

您需要包括后代组合器（空格）：

form :nth-child(3) {
    /* CSS */
}

没有空格，如果-elementform是其父元素的第三个子元素，则选择 -element，而空格则选择. 要仅获取那些直接后代的元素：form

form > :nth-child(3) {
    /* CSS */
}

参考：

• CSS 选择器，第 3 级。

Answer 2

form > p:nth-child(3){
  float: none;   
}

对于 IE 7：

form > p + p + p{
  float: none;
}

Answer 3

x:anything 选择器与 x 相关，因此您的选择器选择 FORM，它是其父级中的第三个子级。

你想做的只是form input:nth-child(3) {float: none;}

如果您有其他形式的孩子<p>，请更好地使用form input:nth-of-type(3) {float: none;}

PS：你必须注意，如果你正在使用<select>或<textarea>太，在这个变体中找不到。