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

Question

::first-letter中的text-decoration似乎无法级联::first-line中的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: 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 和 ::first-letter 的 font-size 覆盖 ::first-line 的那些。无论是否有 !important，它都不会改变。

Answer 1

为了更好地理解正在发生的事情，请在第一个字母中添加一个不同的 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>

来自the specification：

This property describes decorations that are added to the text of an element using the element's color. When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). But, in CSS 2.1, it is undefined whether the decoration propagates into block-level tables. For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

这是一个有点老套的解决方案，您可以用从左侧偏移的渐变替换文本装饰，以不覆盖第一个字母。您可能需要根据每种情况调整该值：

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>

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

Why can text-decoration in ::first-letter not cascade text-decoration in ::first-line?

css

pseudo-element