我有一個有兩個輸入的表單。我想只選擇第一個輸入來添加左上和左下的半徑，但當我使用CSS pseudo時，它也適用于其他(在我的例子中是第二個)輸入。 (在

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 input:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.iconic-input__button {
    background-color: yellow;
    border: none;
    font: inherit;
    padding: .5em 1em;
}

HTML:

<form action="" class="my-stupid-form">
    <div class="iconic-input">
      <label class="iconic-input__label" for="input1">?</label>
      <input class="iconic-input__input" type="text">
    </div>

    <div class="iconic-input">
      <label class="iconic-input__label" for="input2">?</label>
      <input class="iconic-input__input" type="text">
      <button class="iconic-input__button">submit</button>
    </div>
  </form>

我嘗試了這些代碼，但兩個輸入都被選擇:

1)

form.my-stupid-form input:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

form.my-stupid-form input:first-of-type {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

# # #事實上，您希望輸入第一個div子元素

form.my-stupid-form div.iconic-input:first-child input {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

# # #以下是固定代碼:

.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 #input1 {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.iconic-input__button {
    background-color: yellow;
    border: none;
    font: inherit;
    padding: .5em 1em;
}

<form action="" class="my-stupid-form">
    <div class="iconic-input">
      <label class="iconic-input__label" for="input1">?</label>
      <input class="iconic-input__input" id="input1" type="text">
    </div>

    <div class="iconic-input">
      <label class="iconic-input__label" for="input2">?</label>
      <input class="iconic-input__input" id="input2" type="text">
      <button class="iconic-input__button">submit</button>
    </div>
  </form>