Css 第一个切换开关未显示

当我执行这段代码时，第一个切换开关不显示，但第二个切换开关显示正确，工作正常。我不知道代码哪里出错了。请帮帮我

。切换输入{
显示：无；
}
.开关{
显示：内联块；
宽度：60px；
高度：30px；
利润率：8px；
转化：translateY（50%）；
位置：相对位置；
}
.滑块{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
边界半径：30px；
盒影：0 0 2px#777，0 0 4px#777；
光标：指针；
边框：4px实心透明；
溢出：隐藏；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
宽度：100%；
身高：100%；
背景：#777；
边界半径：30px；
转换：translateX（-30px）；
过渡：.4s；
}
输入：选中+。滑块：之前{
转换：translateX（30px）；
背景：白鹭；
}
输入：选中+滑块{
箱影：0 0 0 2px石灰，0 0 0 2px石灰；
}

name=“mathematics
到
name=“mathematics”
。您缺少一个
“
。检查一下


。开关输入{
显示：无；
}
.开关{
显示：内联块；
宽度：60px；
高度：30px；
利润率：8px；
转化：translateY（50%）；
位置：相对位置；
}
.滑块{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
边界半径：30px；
盒影：0 0 2px#777，0 0 4px#777；
光标：指针；
边框：4px实心透明；
溢出：隐藏；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
宽度：100%；
身高：100%；
背景：#777；
边界半径：30px；
转换：translateX（-30px）；
过渡：.4s；
}
输入：选中+。滑块：之前{
转换：translateX（30px）；
背景：白鹭；
}
输入：选中+滑块{
箱影：0 0 0 2px石灰，0 0 0 2px石灰；
}

数学
科学
您在
name=“math

应该是：

<div>
    <label class="switch">
        <input type="checkbox" value="Maths" name="Maths">
        <span class="slider"></span>
    </label>
    Maths
</div>
<div>
    <label class="switch">
        <input type="checkbox" name="Science" value="Science">
        <span class="slider"></span>
    </label>
    Science
</div>


数学
科学
您刚刚遇到一个打字错误，即
name=“math


。切换输入{
显示：无；
}
.开关{
显示：内联块；
宽度：60px；
高度：30px；
利润率：8px；
转化：translateY（50%）；
位置：相对位置；
}
.滑块{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
边界半径：30px；
盒影：0 0 2px#777，0 0 4px#777；
光标：指针；
边框：4px实心透明；
溢出：隐藏；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
宽度：100%；
身高：100%；
背景：#777；
边界半径：30px；
转换：translateX（-30px）；
过渡：.4s；
}
输入：选中+。滑块：之前{
转换：translateX（30px）；
背景：白鹭；
}
输入：选中+滑块{
箱影：0 0 0 2px石灰，0 0 0 2px石灰；
}

数学
科学