我有以下代码：
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
span::first-line {
color: #ff0000;
font-variant: small-caps;
}最佳答案
按照MDN：
原文链接：https://www.f2er.com/html/426233.htmlA 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;
}