Question

我试图在单独的td中对标签+复选框进行穿透。

在我的示例代码中，我创建了2个表：
当checkbox =选中时，目前只有表1正在执行直通。我想这是有效的，因为两个元素共享一个td。有没有办法解决这个问题，因此表2可以直接而不是表1？谢谢！

HTML：

<table id = "1">
    <tr>
        <td>
            <input id="oregano"  type="checkbox" class="checkedBox" />  
            <label for="oregano" class="checkedLabel">Oregano</label>  
        </td>
    </tr>
</table>

<table id = "2">
    <tr>
        <td><input id="oregano"  type="checkbox" class="checkedBox" /></td>        
        <td><label for="oregano" class="checkedLabel">Oregano</label></td>
    </tr>
</table>

样式表：

.checkedBox:checked + .checkedLabel {
        text-decoration: line-through;
        color: blue
        }

小提琴
http://jsfiddle.net/gdmpz506/

Answer 1

这是因为每个table都有不同的语法。

如果您将checkbox和label放在第二个td中的同一table中，它就可以正常使用。（并且当然使id唯一，以便第二个标签不指向第一个元素.. ）

.checkedBox:checked + .checkedLabel {
    text-decoration: line-through;
    color: blue;
}

<table>
    <tr>
        <td>
            <input id="oregano-1" type="checkbox" class="checkedBox" />
            <label for="oregano-1" class="checkedLabel">Oregano</label>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td id="checktd">
            <input id="oregano-2" type="checkbox" class="checkedBox" />
            <label for="oregano-2" class="checkedLabel">Oregano 2</label>
        </td>
    </tr>
</table>

http://jsfiddle.net/gaby/gdmpz506/1/

演示

Answer 2

它适用于表1，因为input和label元素是兄弟，即同一元素的子元素。父母恰好是td元素是无关紧要的。您正确使用“下一个兄弟”运算符+。（这里我假设你真的只想要标签出来。）

当input和label元素不是兄弟元素时，同样不可能，因为如果它们位于不同的td元素中则不可能。目前没有CSS选择器来处理这种情况。您需要使用JavaScript来检查复选框是否标出相应的标签。

使用CSS检查多个td时的直通

2 个答案: