CSS-选择两个输入元素

Question

Demo of My Problem

我想选择前两个输入元素。

  .choicesDiv input[type="radio"]:nth-child(-n+2)
  {
    border: 1px solid yellow;
  }

Answer 1

您需要将单选按钮包裹在另一个元素(如标签)中，不能将边框直接应用于单选按钮。

见下文。

此外，如果您的意图是实际设置单选按钮的边框，那么您需要考虑使用类似本教程的方法创建自定义单选按钮:http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-895 .这相对简单，您要做的就是隐藏单选按钮并将标签的背景图像设置为自定义单选按钮样式。

.qaDiv
{
     width: 100%;
     margin: 10px 0;
     border: 1px solid red;
}

.choicesDiv
{
    margin: 5px;
    border: 1px solid green;
}

.choicesDiv label:nth-child(-n+2)
{
    border: 1px solid yellow;
}

<div class="qaDiv" index="">
    <div class="questionDiv">What is your name?</div>
    <div class="choicesDiv">
        <label><input type="radio" name="choices0" value="Gopi">Gopi</label>
        <label><input type="radio" name="choices0" value="Gops">Gops</label>
        <label><input type="radio" name="choices0" value="GopiNath">GopiNath</label>
        <label><input type="radio" name="choices0" value="GopsAB">GopsAB</label>
    </div>
    <div class="answerDiv"></div>
    <div class="explanationToggle"></div>
    <div class="qButtons"></div>
 </div>