html– 为什么:: first-line不适用于像pdiv标签这样的span？

概述我有以下代码：p::first-line { color: #ff0000; font-variant: small-caps; } span::first-line { color: #ff0000; font-variant: small-caps; }<span> This is to check span.This is

我有以下代码：

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

总结

以上是内存溢出为你收集整理的html – 为什么:: first-line不适用于像p / div标签这样的span？全部内容，希望文章能够帮你解决html – 为什么:: first-line不适用于像p / div标签这样的span？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1122842.html