html - 无法从标签中删除文字装饰

Question

我有以下示例 HTML:

<div class="a">
    <div>
        <ul class="b">
            <li class="c">
                <input id="123" type="checkbox" checked></input>
                <label for="123">test</label>
            </li>
            <li class="c">
                <input id="456" type="checkbox"></input>
                <label for="456">test</label>
            </li>
        </ul>
    </div>
</div>

以及以下 CSS:

.a {
    text-decoration: line-through;
}

.a .b .c input[type="checkbox"]:not(:checked) + label {
    text-decoration: none !important;
}

这可以在这个 JS fiddle 找到:https://jsfiddle.net/4q8a7yox/1/

我想从所有未选中元素的标签中删除划线。奇怪的是，Chrome 控制台将“计算的”文本装饰显示为“无”，但它仍然显示它。所有浏览器(IE10 和 FF)都以类似的方式失败。知道这里发生了什么吗？

Answer 1

根据this question的回答那是不可能的。您不能删除子节点的文本修饰属性。

所以最好的办法是不要将 text-decoration: line-through; 添加到您的 .a 元素，然后尝试将其删除以用于未经检查的输入，而是添加 line-through仅适用于选中的输入。

编辑:试试这个 https://jsfiddle.net/b2bL8ksn/