Html 如何使用css制作单选按钮式开/关开关

我有开/关方法单选按钮的要求，即当点击一个单选按钮时，它应该打开，当点击第二个按钮时，第一个按钮应该关闭，但下面的代码没有按照我的预期工作

以下是该html和css代码的片段：

正文{
背景：0288D1；
}
.复选框和收音机{
利润率：80px自动0；
宽度：280px；
填充：30px；
背景：#fafafa；
输入{
显示：无；
}
标签{
光标：指针；
右边填充：35px；
位置：相对位置；
显示：块；
字号：18px；
填充：15px 0
}
输入[type=“checkbox”]，
输入[type=“radio”]{
位置：绝对位置；
可见性：隐藏！重要；
}
输入[type=“checkbox”]+标签，
输入[type=“radio”]+标签{
&：之前，
&：之后{
内容：''；
位置：绝对位置；
最高：50%；
最高保证金：-7.5px；
框大小：边框框；
}
&：之前{
宽度：30px；
高度：15px；
右：0px；
背景：#fff；
边框：1px实心#e4e3e1；
边界半径：15px；
}
&：之后{
宽度：15px；
高度：15px；
右：15px；
背景:#bdbd；
边界半径：50%；
过渡：所有200毫秒的速度都变慢；
}
}
输入[type=“checkbox”]：选中+标签，
输入[type=“radio”]：选中+标签{
&：之后{
右：0px；
背景：FF9800；
}
}
}

无线电：
无线电标签1
无线电标签2
无线电标签3
复选框：
复选框标签1
复选框标签2
复选框标签3

你的代码对我来说很有魅力。在您提供的小提琴中，SCS未编译为CSS。这里有一个编译版本。单选按钮切换正确

这里还有一个

您的CSS不是CSS而是SCS，必须将其编译为CSS。

您必须使用预处理器将SCS编译为css。你应该从这里开始阅读：

正文{
背景：0288D1；
}
.复选框和收音机{
利润率：80px自动0；
宽度：280px；
填充：30px；
背景：#fafafa；
}
.复选框和收音机输入{
显示：无；
}
.复选框和收音机标签{
光标：指针；
右边填充：35px；
位置：相对位置；
显示：块；
字号：18px；
填充：15px0；
}
.复选框和收音机输入[type=“checkbox”]，
.复选框和收音机输入[type=“radio”]{
位置：绝对位置；
可见性：隐藏！重要；
}
.复选框和收音机输入[type=“checkbox”]+标签：在，
.复选框和收音机输入[type=“checkbox”]+标签：之后，
.复选框和收音机输入[type=“radio”]+标签：在，
.复选框和收音机输入[type=“radio”]+标签：之后{
内容：''；
位置：绝对位置；
最高：50%；
最高保证金：-7.5px；
框大小：边框框；
}
.复选框和收音机输入[type=“checkbox”]+标签：在，
.复选框和收音机输入[type=“radio”]+标签：在{
宽度：30px；
高度：15px；
右：0px；
背景：#fff；
边框：1px实心#e4e3e1；
边界半径：15px；
}
.复选框和收音机输入[type=“checkbox”]+标签：之后，
.复选框和收音机输入[type=“radio”]+标签：之后{
宽度：15px；
高度：15px；
右：15px；
背景:#bdbd；
边界半径：50%；
过渡：所有200毫秒的速度都变慢；
}
.复选框和收音机输入[type=“checkbox”]：选中+标签：之后，
.复选框和收音机输入[type=“radio”]：选中+标签：之后{
右：0px；
背景：FF9800；
}

无线电：
无线电标签1
无线电标签2
无线电标签3
复选框：
复选框标签1
复选框标签2
复选框标签3

创建代码片段比创建小提琴更难吗？无论如何，由于您不会在问题中包含您的代码，因此它是离题的：寻求调试帮助的问题（“为什么此代码不工作？”）必须包含所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。至于公然忽略在添加fiddle链接时得到的警告，然后突出显示一个句子作为代码…@Pete实际上代码太长，警告是由stackoverflow显示的，所以我决定为JSFIDLE添加链接，然后减少代码，直到只显示相关问题。