Question

下面是我正在使用的HTML片段，用于测试：

<form action="#" method="post">
    <input name="username" type="text" placeholder="Username" /><br />
    <input name="password" type="password" placeholder="Password" /><br />
    <input name="emailAddress" type="email" placeholder="Email Address" /><br />
    <input type="submit" value="Submit" />
</form>

这是我正在使用的CSS片段，用于测试：

form {
    width:300px;
    overflow:auto;
    margin:20px 0 0;
    padding:0;
}
/*-Inputs-*/
form input[type=text]:focus, form input[type=password]:focus {outline:0;}

form input {
    width:calc(100% - 22px);
    margin:0;
    padding:10px;
    background:#FFF;
    border:none;
    border-left:solid 1px #CCC;
    border-right:solid 1px #CCC;
}
form input:first-child {
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-top:solid 1px #CCC;
}
form input:last-child {
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    border-top:none;
    border-bottom:solid 1px #CCC;
}

form input:last-child是否可以忽略[type=submit]？那么CSS会将[type=email]视为最后一个孩子吗？

注意：虽然这不会一直是布局，但我的表单中总会有一个提交按钮，我希望:last-child能够忽略。< /强>

Answer 1

解决方案1：使用CSS选择器not（CSS3，因此不完全支持）

https://developer.mozilla.org/fr/docs/Web/CSS/:not

form input:not([type="submit"]):last-child

解决方案2：将类应用于您的输入（跨浏览器解决方案）

HTML

<form action="#" method="post">
    <input class="first-input" name="username" type="text" placeholder="Username" /><br />
    <input name="password" type="password" placeholder="Password" /><br />
    <input class="last-input" name="emailAddress" type="email" placeholder="Email Address" /><br />
    <input type="submit" value="Submit" />
</form>

CSS

form .first-input{ }

form .last-input{ }

Answer 2

我会选择`form input：nth-last-child（2）{...}。支持跨浏览器支持得很好：http://caniuse.com/css-sel3，旧浏览器有polyfills。

可以做输入：最后一个孩子没有选择提交？

2 个答案: