无法从标签中删除文本装饰答案

【问题标题】：Unable to remove text-decoration from label无法从标签中删除文本装饰
【发布时间】：2015-04-09 16:04:36
【问题描述】：

我有以下示例 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）都以类似的方式失败。知道这里发生了什么吗？

【问题讨论】：

标签： html css

【解决方案1】：

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

因此，最好的做法是不要将text-decoration: line-through; 添加到您的 .a 元素中，然后尝试将其删除以用于未检查的输入，而是只为已检查的输入添加换行符。

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

【讨论】：

所以这是 HTML/CSS 规范中的错误？没有任何意义，你可以删除任何其他的 CSS 样式
因为从技术上讲这不是继承。阅读这篇文章，它会比我做得更好：sitepoint.com/web-foundations/text-decoration-css-property
谢谢，这就解释了。这可能是我很久以来见过的最不直观的设计。很遗憾它是这样做的。
再次阅读我提供的链接，如果您从父框中“带走”孩子，您似乎可以避免传输线路。所以我尝试设置一个绝对位置，它似乎工作（至少在 safari mac 上）。请参阅我编辑的答案。

【解决方案2】：

你可以反转css吗？

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

【讨论】：

目前没有，因为 line-through 的条件实际上是在不同的条件下应用于父级的。我让这个例子更容易了

【解决方案3】：

试试看：

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

【讨论】：

【解决方案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;
   }

【讨论】：

但我讨厌!important :)
我太讨厌了！重要。但如果其他 css 有相同的类，则可能有溢出的机会。 :)
专门针对孩子会起作用，你是对的。但是我很好奇为什么必须这样做，当其他 CSS 样式可以应用于父级并在子级上删除时？没有任何意义

【解决方案5】：

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

DEMO

label {
    text-decoration: line-through;
}

编辑：

Updated Demo

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

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

【讨论】：

这适用于所有不需要的标签。这是一个更大的 Web 应用程序 CSS 的一部分，我为这个例子做了简单的处理
@automaton 然后使用更多的特异性。深入到 html 标签。对于此示例，它将是 .a > div > .b > .c > label { text-decoration: line-through; }