检查时如何避免线路从跨度穿过

Question

我有一个项目清单(

li

)。

示例

    <ul class="list">
      <li class="checked">Groceries <span>&#215;</span></li>
      <li>Medicine <span>&#215;</span></li> 
      <li>Shopping <span>&#215;</span></li>
    </ul>

尝试在选择任何项目（

line-through

）时使用

li

，但我不想将线标记为十字图标（

span

）。

我正在尝试对跨度进行文本装饰，但它不起作用

CSS

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


.list li.checked span {
    text-decoration: none !important;       /* Trying to discard underline for span */
}

我们该如何解决这个问题？

Answer 1

你应该改变你正在做的事情。声明

span

的换行并将其放在文本周围。

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

<ul class="list">
  <li class="checked"><span>Groceries</span> &#215;</li>
  <li><span>Medicine</span> &#215;</li> 
  <li><span>Shopping</span> &#215;</li>
</ul>