时间戳

首页 > 解决方案 > 如何拥有装饰文本的一部分 - 未装饰？

css - 如何拥有装饰文本的一部分 - 未装饰？

问题描述

我怎样才能使装饰段落内的跨度，而不是装饰？

CSS

p {
    text-decoration: underline;
}

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

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

标签： csshtmltext-decorations

解决方案

不幸的是，使用您建议的方法这是不可能的，如果您可以为段落内的文本节点设置样式，则可能有可能，但 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>

推荐阅读