可以在不选择submit的情况下执行input:last-child

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/:不

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:n -last-child(2){…}。它的跨浏览器支持良好:http://caniuse.com/css-sel3，并有旧浏览器的填充。