html - 我的第一个隐藏 UL 设置为显示 : none; affecting second UL

Question

我有两个 UL 部分，第一个默认设置为显示:无；并将其更改为显示: block ，然后将第二个设置为显示:无；基于选择输入的变化。

在我的每个列表项中都有一个复选框和一个标签标签。

出于某种原因，当第一个列表隐藏任何长度时，其他显示的列表不允许我单击复选框的标签来选择它。

所以在下面，如果我在我的 css 中设置 #first {display: none;} 那么我就不能使用“第二个选项 1”的标签来选中它的复选框。复选框本身仍按预期运行。

我尝试将 z-index 应用于标签，但它似乎没有任何影响。我还没有尝试将列表移到负面位置，但只是想知道我是否必须处理它或者我是否遗漏了什么。

显然，与我拥有的其他标记相比，下面的源是最小的，因此它可能与影响它的其他部分完全相关。

浏览器为IE9。

<div id="barcodes">
 <ul id="first">
    <li>
      <input type="checkbox" name="1" id="1" />
      <label for="1">First Option 1</label>
    </li>
 </ul>
 <ul id="second">
    <li>
      <input type="checkbox" name="1" id="1" />
      <label for="1">Second Option 1</label>
    </li>
    <li>
      <input type="checkbox" name="2" id="2" />
      <label for="2">Second Option 2</label>
    </li>
 </ul>
</div>

• 经过编辑以反射(reflect)我遇到问题的实际代码。

Answer 1

DEMO

#first :first-child {
    display:none;
}