Question

关于代码here：

小提琴中的单选按钮不像单选按钮那样起作用。

我不熟悉CSS中的+，我想知道这是否与它有关。

Answer 1

input[type="radio"]:checked+label{ ..... } 
 //a label that immediately follows an input of type radio that is checked

Answer 2

CSS中的+符号表示与第一个选择器相邻的选择器。

在您的示例中，+符号正在修改标签，而不是实际的单选按钮，只修改标签。

现在它无法正常工作，因为您没有为单选按钮指定组名（或名称），请尝试以下html。

<form>
  <input type="radio" id="radio1" name="rdo">
  <label for="radio1"></label>
  <input type="radio" id="radio2" name="rdo">
  <label for="radio2"></label>
</form>

现在，radiobuttons被绑定为相同的名称，并且将正常运行。

干杯，尼科

Answer 3

这将选择相邻元素，请参阅The 30 CSS Selectors you Must Memorize。

FTA：

这被称为相邻选择器。它将仅选择前一个元素前面的元素。在这种情况下，每个ul后只有第一段会有红色文字。

在IE7 +中支持

Answer 4

它匹配紧接在另一个指定元素之前的元素。

在您的示例中，这意味着它匹配label input元素之后的任何type="radio"元素。

有关选择器的更多信息，请访问：http://www.w3.org/TR/CSS2/selector.html

Answer 5

如果您指的是不互斥的单选按钮（您可以选择多个），那是因为html没有将单选按钮定义为同一组的一部分。使用name属性来实现这一目标。

<form>
  <input type="radio" name="radioGroup" id="radio1">
  <label for="radio1"></label>
  <input type="radio" name="radioGroup" id="radio2">
  <label for="radio2"></label>
</form>

我相信你对CSS中的+的问题是无关紧要的，但它被正确地识别为其他答案中的下一个兄弟。

+运算符在CSS中做了什么

5 个答案: