为什么添加div::before伪元素后::first-letter选择器样式不生效

云上老周

2026-10-15

问题原因

::first-letter不生效和优先级、!important无关，是CSS规范的默认逻辑导致：如果块级元素带有content不为none的::before伪元素，::first-letter会优先匹配::before伪元素内容的首字母，而非元素本身内部文本的首字母。你当前::before的content是空字符串""，不属于none，因此你写的首字母样式实际作用在了空内容上，自然看不到效果。

解决方案

无需修改HTML代码，你可以将原本写在::before、::after里的上下渐变条，改用CSS多重背景实现，删掉多余的伪元素即可让::first-letter样式正常生效，最终实现效果和需求一致。

修改后的完整代码

div::first-letter {
  color: #f44336;
}

div {
  width: 600px;
  margin: 0 auto;
  /* 多重背景依次为：顶部渐变条、底部渐变条、中间灰色背景 */
  background: 
    linear-gradient( to right, #f44336 0%, #f44336 20%, #2196f3 20%, #2196f3 40%, #4caf50 40%, #4caf50 60%, #e91e63 60%, #e91e63 80%, #673ab7 80%, #673ab7 100%) top / 100% 10px no-repeat,
    linear-gradient( to right, #f44336 0%, #f44336 20%, #2196f3 20%, #2196f3 40%, #4caf50 40%, #4caf50 60%, #e91e63 60%, #e91e63 80%, #673ab7 80%, #673ab7 100%) bottom / 100% 10px no-repeat,
    #eee;
  text-align: center;
  padding: 25px 0;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 7px;
  border-right: 10px solid #673ab7;
  border-left: 10px solid #f44336;
}