如何避免选中li元素时span被添加line-through删除线

问题出在text-decoration的工作机制上：当你给父元素（这里是.list li.checked）设置line-through时，这条删除线是父元素生成的，会直接贯穿所有子元素，子元素设置text-decoration: none根本没用——因为这条线不属于子元素，是父元素的装饰。

给你两种靠谱的解决思路：

方案一：单独包裹需要删除线的文本（推荐） #

把li里的普通文本单独用一个标签包起来，只给这个标签加删除线，叉号的span自然不会被影响。

修改后的HTML：

<ul class="list">
    <li class="checked"><span class="item-text">Groceries</span> <span>&times;</span></li>
    <li><span class="item-text">Medicine</span> <span>&times;</span></li> 
    <li><span class="item-text">Shopping</span> <span>&times;</span></li>
</ul>

对应的CSS：

.list li.checked .item-text {
    text-decoration: line-through;
}

这样逻辑清晰，兼容性拉满，不会有奇怪的问题。

方案二：让叉号span脱离父元素的装饰流 #

给叉号的span设置display: inline-block，这样父元素的删除线就不会穿过它了（因为inline-block元素会打断父元素的文本装饰线）：

CSS修改成这样：

.list li.checked {
    text-decoration: line-through;
}

.list li.checked span {
    display: inline-block;
    /* 这里不需要text-decoration: none了，inline-block已经能阻断装饰线 */
}

这个方法不用改HTML，适合不想动结构的场景，不过要注意一些老浏览器的兼容性（现在大部分主流浏览器都支持了）。

内容的提问来源于stack exchange，提问作者akhtarvahid