Question

如何在未装饰的段落中设置跨度？

CSS

p {
    text-decoration: underline;
}

span {
    text-decoration: none;
    /* text-decoration: line-through; */
}

我想在未装饰的跨度上划一条线。
我觉得应该很容易做到这一点，因此我找不到在线解决方案，或者这样做根本不合逻辑。

Answer 1

不幸的是，使用您建议的方法无法做到这一点，如果可以在段落的中设置文本节点的样式，则有可能，但是CSS没有用于文本节点的选择器。

您当然可以实现所需的结果，但是它将需要样式化同级元素而不是父元素。例如，您可以将其他文本包装在<span>元素内，然后设置其样式。

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

<p>
  <span class="underline">Is</span>
  <span class="line-through">this</span>
  <span class="underline">what you want to do?</span>
</p>

Answer 2

可以通过一个简单的技巧完成该操作，该技巧将给出text-dectoration：下划线以显示范围并将其颜色更改为与背景颜色相同的颜色

喜欢此片段

p{
  font-size:25px;
  color:blue;
  text-decoration:underline; 
 }
p span{
  color:red;
  text-decoration:underline;
  text-decoration-color:#fff;
}

中查看结果