html - 可以做输入 :last-child without choosing submit?

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;
}

表单 input:last-child 是否可以忽略 [type=submit]？这样 CSS 就会将 [type=email] 视为最后一个 child ？

注意:虽然布局并不总是这样，但在我的表单中总会有一个提交按钮，我希望 :last-child 能够忽略它.

Answer 1

解决方案 1:使用 CSS 选择器不(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{ }