为什么在::first-line伪类中设置opacity:0不生效，是否为优先级问题

该现象和CSS优先级完全无关，是::first-line伪元素的属性支持限制导致的。

• CSS规范明确限定了::first-line可生效的属性范围，仅包含以下类别：
  • 字体相关属性（font-size、font-family、font-weight等）
  • 颜色与背景相关属性（color、background系列属性等）
  • 文本排版相关属性（text-decoration、text-transform、line-height、letter-spacing等）
  • 少量盒模型装饰属性（部分浏览器支持border、margin、padding相关属性）
• opacity不属于上述支持的属性列表，因此即使写入规则也不会生效。你示例中color、font-size能正常生效，正是因为这两个属性在支持范围内。

如果要实现首行透明效果，可采用两种兼容方案：

1. 用透明色替代，color属性是::first-line明确支持的属性：

p::first-line{
    color : transparent;
    font-size : 30px;
}

2. 如果需要完整的透明度控制能力（比如首行包含其他元素、需要统一控制所有内容透明度），可以手动给首行内容套<span>标签，对span设置opacity即可：

<p><span class="first-line">Really can't remember where I left my spine</span>
        Carrying my body in a bag for dimes
        Hidden in the pages of the New York Times at home
        And maybe I'll be better if I take my meds
        Ain't a double header if you lose your head
        Tried a medication that I bought instead</p>

p .first-line {
    opacity: 0;
    font-size: 30px;
}

内容的提问来源于stack exchange，提问作者kichu