CSS-如何选择表单元素的第n个子元素? [英] CSS - How to select nth-child of form element?

问题描述

我正在尝试重新设计WP网站的注册表格.我还添加了一些exta字段.我增加了< form> 容器的宽度，并将< input> 字段的流设置为左侧.但是我想将电话字段流(< form> 元素的第三个子元素)设置为无，即 float:none; .我尝试执行以下操作: form:nth-​​child(3){float:none;} ，但它似乎无法正常工作.它选择表格，而不是表格的第三个字段.怎么了?

I am trying to re-design the registration form of my WP website. I also add some exta fields. I increase the width of <form> container and set <input> field's flow to left. But I want to set flow of phone field (which is third child of <form> element) to none i.e. float: none;. I try to do this: form:nth-child(3) {float: none;} but it seen to be not working. It selects form rather then 3rd field of form. What is wrong?

此处是我网站的注册页面.请帮忙.

Here is registration page of my site. Please help.

推荐答案

您需要包括后代组合器(空格):

You need to include the descendant combinator (the space):

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

如果没有空格，则选择 form -element if ，如果它是其父级的第三个孩子，请选择空格，然后选择第三个孩子 form 的元素.要仅获取直接为 后代的那些元素，请执行以下操作:

Without the space, you're selecting the form-element if it's the third-child of its parent, with the space you're selecting the third-child elements of the form. To get only those elements that are direct descendants:

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

参考:

• CSS选择器，级别3 .

这篇关于CSS-如何选择表单元素的第n个子元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！