为什么单选按钮需要:name ="radios"用于CSS3识别

Question

尝试编辑两个单选按钮的外观,如果标记如下,则一切正常:

<ul class="radioHorizontal">
    <li class="spaceRight">
        <input id="radioYes" type="radio" name="radios" checked>
        <label for="radioYes">Yes</label>
    </li>
    <li>
        <input id="radioNo" type="radio" name="radios">
        <label for="radioNo">No</label>
    </li>
</ul>

但是,如果我删除:name="radios"并且保持其他所有内容不受影响,在我的ul列表内部或外部,按钮永远不会被取消选中,并且我所期望的效果会被破坏.

My CSS3 is as follows:

    input[ type = radio ]
{
    display:none; 
}

input[ type = radio ] + label
{
    padding: 4px 12px;
    background-color: rgba( 40, 40, 40, 1 );

    border: 2px solid rgb( 30, 30, 30 );
    box-shadow: 0px 1px 0px rgba( 125, 125, 125, 0.75 );
}

input[ type = radio ]:checked + label
{ 
    background-image: none;
    background-color: rgba( 255, 255, 255, 0.4 );
}

我使用name ="radio"没有问题,除非一些不可预见的,奇怪的具体情况禁止它我只是好奇为什么这需要CSS3才能工作.

Answer 1

它根本不会影响CSS,但需要使用名称对它们进行分组.只能选择一个组中的一个单选按钮,并自动取消选择其他单选按钮.如果你没有给他们一个名字,他们每个人都在他们自己的小组中.