为什么:: first-letter中的文本装饰不能级联:::-first-line中的文本装饰？

Question

[似乎text-decoration中的::first-letter无法级联text-decoration中的::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>

C0]的[color和font-size覆盖::first-letter的那些。无论是否有::first-line，它都不会改变。

Answer 1

为了更好地了解正在发生的事情，请添加一个不同的!important以供查看

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>

：

此属性描述使用元素的颜色添加到元素文本的修饰。当在内联元素上指定或传播到内联元素时，它会影响该元素生成的所有框，然后进一步传播到拆分内联的任何流入块级框（请参见9.2.1.1节）。但是，在CSS 2.1中，尚不确定装饰是否传播到块级表中。对于建立内联格式设置上下文的块容器，装饰将传播到一个匿名的内联元素，该元素包装该块容器的所有流入的内联级别子级。对于所有其他元素，它会传播到任何流入子对象。请注意，文本修饰不会传播到浮动和绝对定位的子代，也不会传播到原子内联级别子代的内容，例如内联块和内联表。