Question

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

  .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>

Answer 2

尝试将收音机类型更改为复选框。您只能选择一个单选按钮，而您可以选择多个复选框

＆＃13;

.qaDiv
{
     width: 100%;
     margin: 10px 0;
     border: 1px solid red;
}

.choicesDiv
{
    margin: 5px;
    border: 1px solid green;
}

.choicesDiv input[type="checkbox"]:nth-child(-n+2)
{
    border: 1px solid yellow;
}

＆＃13;

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

＆＃13;

让我知道它是否有帮助：）

Answer 3

我不知道为什么边框不起作用，它正在使用阴影

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

CSS-选择两个输入元素

3 个答案: