html – 为什么:: first-line不适用于像p / div标签这样的span?

前端之家收集整理的这篇文章主要介绍了html – 为什么:: first-line不适用于像p / div标签这样的span?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有以下代码

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
span::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

问题是伪元素适用于p标记并将第一行更改为指定颜色,但同样不适用于span标记.

最佳答案
按照MDN

A first line has only meaning in a block-container Box,therefore the ::first-line pseudo-element has only an effect on elements with a display value of block,inline-block,table-cell or table-caption. In all other cases,::first-line has no effect.

以下是W3C Spec的摘录:(第7.1.1节CSS中的第一个格式化的行定义)

In CSS,the ::first-line pseudo-element can only have an effect when attached to a block-like container such as a block Box,table-caption,or table-cell.

从@L_403_2@开始,::第一行选择器对它没有影响.如果我们将跨度的显示更改为内联块或块,它将起作用.

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
span::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
span.block {
  display: block;
}
span.inline-block {
  display: inline-block;
}

猜你在找的HTML相关文章