看起来text-decoration in ::first-letter不能级联text-decoration in ::first-line。
这是代码：
p::first-line {
color: orange;
font-size: 22px;
text-decoration: line-through;
}
p::first-letter {
color: green;
font-size: 36px;
text-transform: capitalize;
text-decoration: none !important;
}
<p>
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
color and font-size of ::first-letter覆盖那些::first-line。是否有也没有什么改变!important or not.
为了更好地了解正在发生的情况，添加不同的text-decoration到第一个字母：
p::first-line {
color: orange;
font-size: 22px;
text-decoration: line-through;
}
p::first-letter {
color: green;
font-size: 36px;
text-transform: capitalize;
text-decoration: underline;
}
<p>
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
正如您所看到的，第一个字母有下划线和贯穿线。这就是文本装饰的工作原理，它传播到所有内联元素，您可以在树中添加更多装饰。
为了避免这种情况，您需要更改显示，但不幸的是，您无法使用第一个字母来做到这一点。
下面再举一个例子来展示一下显示效果：
p {
color: orange;
font-size: 22px;
text-decoration: line-through;
}
span {
text-decoration:underline;
color:green;
}
<p>
lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
lorem ipsum dolor sit amet, <span style="display:inline-block;">consectetur</span> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
From 规格 https://www.w3.org/TR/CSS2/text.html#lining-striking-props:
此属性描述使用元素颜色添加到元素文本的装饰。当在内联元素上指定或传播到内联元素时，它影响该元素生成的所有框，并进一步传播到任何分割内联的流内块级框（参见第 9.2.1.1 节）。但是，在 CSS 2.1 中，装饰是否传播到块级表中是未定义的。对于建立内联格式化上下文的块容器，装饰将传播到包装块容器的所有流入内联级子级的匿名内联元素。对于所有其他元素，它会传播到任何流入的子元素。请注意，文字装饰是不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代的内容，例如内联块和内联表。
这是一个有点 hacky 的解决方案的想法，您可以用从左侧偏移的渐变来替换文本装饰，以不覆盖第一个字母。您可能需要根据每种情况调整该值：
p::first-line {
color: orange;
font-size: 22px;
background:
linear-gradient(orange,orange) top calc(50% + 0.05em) left 1em / 100% 0.1em no-repeat;
}
p::first-letter {
color: green;
font-size: 36px;
text-transform: capitalize;
}
<p>
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
