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小提琴中找到：https://jsfiddle.net/4q8a7yox/1/

我想从未检查项目的所有标签中删除直通。奇怪的是，Chrome控制台会显示“计算机”和“计算机”。文字装饰为“没有”，但它仍然显示出来。所有浏览器（IE10和FF）都以类似的方式失败。知道这里发生了什么吗？

Answer 1

根据this question的答案，这是不可能的。您无法删除子节点的文本修饰属性。

因此，最好的办法是不将text-decoration: line-through;添加到.a元素中，然后尝试将其删除以获取未经检查的输入，而是仅为已检查的输入添加直通。

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

Answer 2

将您的选择器从.a更改为label。

<强> DEMO

label {
    text-decoration: line-through;
}

编辑：

<强> Updated Demo

使用更多的特异性。深入研究html标签。对于这个例子，它将是：

.a > div > .b > .c > label { 
   text-decoration: line-through; 
}

Answer 3

你能反转css吗？

.a .b .c input[type="checkbox"]:checked + label {
    text-decoration: line-through;
}

Answer 4

请使用此CSS。我对你的CSS几乎没有什么改变。

   .a .b .c input[type=checkbox] + label {
    text-decoration: line-through;
    }

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

Answer 5

试试：

.a .c input[type="checkbox"]:checked + label {
text-decoration: line-through; }

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

5 个答案: