如何使用CSS伪类仅选中表单中的第一个input元素

你当前的CSS选择器之所以会选中两个input，核心原因是：input:first-child和input:first-of-type都是基于元素的直接父容器来匹配的。你的两个input分别放在独立的.iconic-input容器里，每个容器内的input都是该容器下的第一个input类型元素，所以两个input都会被命中。

要只给表单里的第一个input添加圆角，需要先定位到第一个.iconic-input容器，再选中里面的input。修改后的CSS选择器如下：

/* 精准选中第一个.iconic-input容器内的input */
form.my-stupid-form > .iconic-input:first-child .iconic-input__input {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

代码说明 #

• >符号限定只选择form的直接子元素.iconic-input，避免影响深层嵌套的同类容器
• :first-child选中form下的第一个.iconic-input容器
• 最后定位到容器内的.iconic-input__input元素，仅给它添加圆角样式

替换你原来的选择器后，就只会给第一个input添加左上和左下圆角了。另外，你原CSS里还有两处语法错误，顺便修正：

1. .iconic-input里的font-size 1.4em需加冒号，改为font-size: 1.4em;
2. .iconic-input__label里的line height: 2需连写，改为line-height: 2;

修正后的完整CSS代码：

.my-stupid-form {
    margin: 0 auto;
    max-width: 70%;
}
.iconic-input {
    margin: 1em 0;
    display: flex;
    font-size: 1.4em;
}
.iconic-input__label {
    background-color: yellow;
    padding: .2em 1em;
    line-height: 2;
}
.iconic-input__input {
    border: none;
    padding: .2em;
    font: inherit;
    flex-grow: 1;
    width: 100%;
}
form.my-stupid-form > .iconic-input:first-child .iconic-input__input {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.iconic-input__button {
    background-color: yellow;
    border: none;
    font: inherit;
    padding: .5em 1em;
}

内容的提问来源于stack exchange，提问作者Amin