为什么:: first-letter中的文本装饰不能在:: first-line中级联文本装饰? [英] Why can text-decoration in ::first-letter not cascade text-decoration in ::first-line?

问题描述

似乎 :: first-letter 中的 text-decoration 无法在 :: first-行.这是代码:

It seems that text-decoration in ::first-letter can not cascade text-decoration in ::first-line. Here is the code:

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 和 font-size 会覆盖 :: first-line 的那些.无论是否存在！important ，它都不会改变.

color and font-size of ::first-letter override those of ::first-line. And it changes nothing whether there is !important or not.

推荐答案

要更好地了解正在发生的情况，请在第一个字母后添加不同的 text-decoration :

To better understand what is happening add a different text-decoration to the first letter:

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>

如您所见，第一个字母带有下划线和直行.这是文本修饰的工作方式，它传播到所有内联元素，并且您可以在Tree下方添加更多修饰.

As you can see the first-letter is having the underline AND the line-through. This is how text-decoration works, it propagates to all the inline elements and you can add more decoration down the Tree.

为避免这种情况，您需要更改显示，但是不幸的是，这是您无法使用第一个字母进行的操作.

To avoid this you need to change the display but this is something you cannot do with first-letter unfortunately.

这是另一个显示效果的例子:

Here is another example to show the effect of display:

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中，尚不确定装饰是否传播到块级表中.对于建立内联格式设置上下文的块容器，装饰将传播到一个匿名的内联元素，该元素包装该块容器的所有流入的内联级别子级.对于所有其他元素，它会传播到任何流入子项.请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级别的后代(例如内联块和内联表)的内容.

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.

---

这里是一个有点棘手的解决方案，您可以用从左向左倾斜而不覆盖第一个字母的渐变替换文本装饰.您可能需要根据每种情况调整值:

---

Here is an idea of a solution a little hacky where you can replace the text-decoration with a gradient that you offset from the left to not cover the first letter. You may have to adjust the value based on each situation:

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中级联文本装饰?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！