css - 如何将css应用于带ID的输入？

Question

我正在使用 SurveyProject 进行民意调查，并使用此 html 结构提出带有 2 个答案的问题:

1 个回答:

<tr class="answerStyle">
<td class="cellValign">
<span id="SurveyControl_Question18__as50577__ai72_as50577"><div>
<div id="grbD">
<input name="SurveyControl$Question18_as50577:_grp18" class="globalRadioButton" id="SurveyControl_Question18__as50577__ai72_as50577_ctl00" type="radio" value="SurveyControl$Question18$_as50577$_ai72_as50577$ctl00">
<label class="globalRadioButtonLabel" runat="server" associatedcontrolid="SurveyControl_Question18__as50577__ai72_as50577_ctl00">NO</label>    
</div>
</div>
</span>
</td>
</tr>

2 个回答:

<tr class="answerStyle">
    <td class="cellValign">
        <span id="SurveyControl_Question18__as50577__ai71_as50577">
            <div>
                <div id="grbD">
                    <input name="SurveyControl$Question18_as50577:_grp18" class="globalRadioButton" id="SurveyControl_Question18__as50577__ai71_as50577_ctl00" type="radio" value="SurveyControl$Question18$_as50577$_ai71_as50577$ctl00">
                    <label class="globalRadioButtonLabel" runat="server" associatedcontrolid="SurveyControl_Question18__as50577__ai71_as50577_ctl00">yes<br>comment:</label>
                </div>
            </div>
        </span>
    </td>
</tr>

因为我无法更改 html，所以我想将样式与 css 应用到 ID #SurveyControl_Question18__as50577__ai71_as50577_ctl00 的第二个答案输入中，但是我尝试的所有方法都不起作用...我试过:

input[name="SurveyControl$Question18_as50577:_grp18"] {
float: left;
margin-top: 20px;
}

#SurveyControl_Question18__as50577__ai71_as50577_ctl00 {
float: left;
margin-top: 20px;
}

#SurveyControl_Question18__as50577__ai71_as50577 input {
float: left;
margin-top: 20px;
}

还有一些其他的，但唯一有效的是:

#grbD input {
float: left;
margin-top: 20px;
}

但这也会影响第一个答案的输入，因为它使用相同的 div 的 id。有什么想法吗？

Answer 1

您可以尝试使用这些选择器。

.answerStyle:nth-child(2) #grbD input {
float: left;
margin-top: 20px;
}

或者

.answerStyle:not(:first-child) #grbD input {
  float: left;
  margin-top: 20px;
}