时间戳

首页 > 解决方案 > 为什么 ::first-letter 中的文本装饰不能级联 ::first-line 中的文本装饰？

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

问题描述

看来text-decorationin::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>

color和font-size覆盖::first-letter那些::first-line。不管有没有，它都!important不会改变。

标签： csspseudo-element

解决方案

为了更好地了解正在发生的事情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 中，装饰是否传播到块级表中是未定义的。对于建立内联格式化上下文的块容器，装饰被传播到一个匿名内联元素，该元素包装了块容器的所有流入内联级子项。对于所有其他元素，它会传播到任何流入的子元素。请注意，文本装饰是不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代的内容，例如内联块和内联表。

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

推荐阅读