Question

我正在尝试重新设计WP网站的注册表格。我还添加了一些exta字段。我增加了<form>容器的宽度，并将<input>字段的流量设置为左侧。但是我想将电话字段（<form>元素的第三个孩子）的流量设置为无，即float: none;。我尝试这样做：form:nth-child(3) {float: none;}但它看起来不起作用。它选择形式而不是形式的第3个字段。有什么问题？

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

Answer 1

您需要包含后代组合子（空格）：

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

如果没有空格，你选择form - 元素如果它是其父级的第三个孩子，你选择第三个子元素的空间form。只获取那些 direct 后代的元素：

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

参考：

CSS Selectors, Level 3。

Answer 2

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

IE 7的

：

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

Answer 3

x：任何选择器与x有关，因此您的选择器会选择FORM，它是其父级中的第3个子级。

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

如果您在<p>等表单中有其他子女，请更好地使用form input:nth-of-type(3) {float: none;}

PS：如果您使用的是<select>或<textarea>，则必须注意，这种情况并不存在。

CSS - 如何选择表单元素的nth-child？

3 个答案: