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

Question

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

::first-letter 的

color 和 font-size 覆盖 ::first-line 的

color 和 font-size 。无论是否有!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.

<小时/>

这是一个有点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>