如何让部分装饰文字 - 不装饰？

Question

如何在装饰段落内制作span，而不是装饰段落？

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

可以通过一个简单的技巧来完成，即为 span 添加文本装饰：下划线并将其颜色更改为相同的背景颜色

喜欢这个片段

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

How to have a part of the decorated text - NOT decorated?