复选框输入列 css 规则始终应用于第一行中的元素

Question

我有一个 table，其中有一列复选框 here。我遇到的问题是切换任何行上任何输入的选中属性，更改始终应用于第一行中的元素。

所以根据我的理解 CSS 规则

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

始终应用于第 1 行。

一个可能的解决方案是为每一行添加一个规则：

#row-1 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-2 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-3 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-4 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-5 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-6 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {margin-left: 0;}

#row-1 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-2 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-3 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-4 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-5 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-6 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; }

但是我宁愿不使用这个选项，因为它不是可维护性的最佳选择，而且行数直到运行-时间才知道。

我该如何解决这个问题？

Answer 1

每个 input 必须有唯一的 id 和 label for="that id"。即

<input id="E1" type="checkbox"><label for="E1">...</label>
<input id="E2" type="checkbox"><label for="E2">...</label>

更新演示： https://jsfiddle.net/L7y0gzd2/2/

复选框输入列 css 规则始终应用于第一行中的元素

Checkbox Input column css rule always applied to element in the first row

html

css

html-table

css-selectors