Question

我有一个从JS执行的测验。这是一个100个问题池的数组。每次尝试只显示5个问题，这就是我这样做的原因。我想设置其单选按钮的样式。我做的如下，它不起作用：

JavaScript的：

  answers.push(
      `<label class="quiz">
        <input type="radio" name="question${questionNumber}" value="${letter}">
        ${currentQuestion.answers[letter]}
      </label>`
    );

CSS：

.quiz input[type="radio"] {
   display: none;
}
.quiz label {
   display: inline-block;
   background-color: red;
   padding: 4px 11px;
   font-family: Arial;
   font-size: 16px;
   cursor: pointer;
}
.quiz input[type="radio"]:checked+label {
   background-color: yellow;
}

我做错了什么？

Answer 1

我相信您只是尝试将样式应用于元素RuntimeException。如果是这样，您的CSS选择器的顺序不正确。

要将样式应用于具有类<label class="quiz">的元素label，您应该将选择器编写为quiz

label.quiz会查找属于.quiz label

元素子元素的label个元素

如果我误解了您的问题，请告诉我：）

Answer 2

您的标签格式错误。

answers.push(
    `<input type="radio" name="question${questionNumber}" value="${letter}">
    <label class="quiz">${currentQuestion.answers[letter]}</label>`
);

并从2个css声明中删除.label：

.quiz {
    display: inline-block;
    background-color: red;
    padding: 4px 11px;
    font-family: Arial;
    font-size: 16px;
    cursor: pointer;
}
input[type="radio"]:checked+label {
    background-color: yellow;
}

我不认为你想要这个（删除）：

/*.label.quiz input[type="radio"] {
    display: none;
}*/

变化：

.answers label{
    display: inline-block;
    ...

https://codepen.io/wazz/pen/paPaEN

来自JS测验的样式输入收音机

2 个答案: