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.

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

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;
}

display as blockdisplay as inline-block

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。