Question

我有一个复选框列表。用户只能选择10.我想突出显示第11个（和更高）已选中复选框 with CSS ，以显示他们必须取消选中某些复选框。（我知道还有其他方法可以做到这一点，包括JS和我理解浏览器的限制; 这是一个练习）

选中的复选框标签以绿色突出显示，因此：

li > input:checked + label {
  color: green;
}

第11个及更高的复选框标签应突出显示为红色：

li > input:checked:nth-child(n+11) + label {
  background-color: red;
}

但这不起作用。一个简单的测试表明我至少有nth-child（）语法正确：

li:nth-child(n+11) {
  background-color: red;
}

有效。使用:checked或+选择器时是否存在问题？

编辑：使用HTML充实示例

以下是HTML 可能的样子：

<form action="#" method="get">
    <ul>
        <li><input type="checkbox" id="checks1" name="checks"> <label for="checks3">Test 1</label></li>
        <li><input type="checkbox" id="checks2" name="checks"> <label for="checks3">Test 2</label></li>
        <li><input type="checkbox" id="checks3" name="checks"> <label for="checks3">Test 3</label></li>
        <!-- etc -->
    </ul>
</form>

这是一个有效的JS小提琴上面的所有场景：http://jsfiddle.net/eQuEW/1/

在此示例中，已检查前12个框。选中的复选框具有绿色标签。复选框11及以上有粗体文本，就像我所说的那样。复选框11和12 应具有红色背景（但它们没有）。然后，例如，如果用户取消选中复选框1，则红色背景将不再位于复选框11上，因为2-11表示前10个已检查复选框，12表示第一个更大超过10（因此，错误）。

Answer 1

无论DOM结构如何，纯CSS都无法做到这一点。原因是:nth-child和:nth-of-type将始终选择相同的元素，而不管其他选择器。因此:nth-child( n+11 )将始终在第10个之后选择每个选择框。添加其他过滤器（例如:checked）只会过滤到所有已检查的输入，索引为＆gt; 10。

您无法过滤nth-child的结果，因为它只是计算以前的兄弟姐妹的数量。

只是为了它的乐趣，展示我的意思：http://jsfiddle.net/u4xxA/1/

Answer 2

如果我理解你，你的HTML看起来像

<ul>
 <li>
  <input type="checkbox"...>
  <label for="...">...</label>
 </li>
 <li>
  <input type="checkbox"...>
  <label for="...">...</label>
 </li>
</ul>

如果是这种情况，则表示您遇到了问题。看，CSS选择器从根向下工作，并且不能反过来。（根据子节点选择节点不起作用。）添加到:nth-child（和:nth-of-type，这是我最初建议的）将根据其中的索引选择节点parent，在这种情况下是<li>元素。（这意味着只要每个复选框都在自己的列表项中，就永远不会有第11个复选框。）

你需要的是像

(li:has(input:checked)):nth-of-type(n+11) label {
    ...
}

但:has和CSS中不存在括号，从我听到的情况来看，它可能永远不会存在。你需要用JS做这个。

（编辑：我有一些提到CSS，如果你重新安排你的HTML会有用......但事实证明它不起作用。伪类彼此独立工作，所以你总是最终选择第11个方框如果被选中，而不是第11个复选框。）

Answer 3

参加聚会可能有点晚了，但由于所有其他答案都表示不能单靠CSS完成，这就是解决方案。

如果所有复选框都在同一容器中，则只能执行此操作。所以每个列表项不是一个复选框。如果您希望结果看起来像列表，则必须添加更多CSS。

＆＃13;

input:checked + label {
  color: green;
}

input:checked ~ input:checked ~ input:checked ~ input:checked
~ input:checked ~ input:checked ~ input:checked ~ input:checked
~ input:checked ~ input:checked ~ input:checked + label {
  color: red;
}


/* Put each checkbox on a different line */
label:not(:last-child)::after {
  content: '\000A';
  white-space: pre;
}

＆＃13;

<div class="list">
  <input type="checkbox" id="checks1" name="checks"> <label for="checks1">Test 1</label>
  <input type="checkbox" id="checks2" name="checks"> <label for="checks3">Test 2</label>
  <input type="checkbox" id="checks3" name="checks"> <label for="checks3">Test 3</label>
  <input type="checkbox" id="checks4" name="checks"> <label for="checks4">Test 4</label>
  <input type="checkbox" id="checks5" name="checks"> <label for="checks5">Test 5</label>
  <input type="checkbox" id="checks6" name="checks"> <label for="checks6">Test 6</label>
  <input type="checkbox" id="checks7" name="checks"> <label for="checks7">Test 7</label>
  <input type="checkbox" id="checks8" name="checks"> <label for="checks8">Test 8</label>
  <input type="checkbox" id="checks9" name="checks"> <label for="checks9">Test 9</label>
  <input type="checkbox" id="checks10" name="checks"> <label for="checks10">Test 10</label>
  <input type="checkbox" id="checks11" name="checks"> <label for="checks11">Test 11</label>
  <input type="checkbox" id="checks12" name="checks"> <label for="checks12">Test 12</label>
  <input type="checkbox" id="checks13" name="checks"> <label for="checks13">Test 13</label>
  <input type="checkbox" id="checks14" name="checks"> <label for="checks14">Test 14</label>
  <input type="checkbox" id="checks15" name="checks"> <label for="checks15">Test 15</label>
  <input type="checkbox" id="checks16" name="checks"> <label for="checks16">Test 16</label>
  <input type="checkbox" id="checks17" name="checks"> <label for="checks17">Test 17</label>
  <input type="checkbox" id="checks18" name="checks"> <label for="checks18">Test 18</label>
  <input type="checkbox" id="checks19" name="checks"> <label for="checks19">Test 19</label>
  <input type="checkbox" id="checks20" name="checks"> <label for="checks20">Test 20</label>
</div>

＆＃13;

可以：检查和：nth-child（）一起使用？

3 个答案:

可以：检查和：nth-​​child（）一起使用？

3 个答案:

可以：检查和：nth-child（）一起使用？