如何仅对作为父元素首个子元素的p标签首字母设置首字下沉效果

仅通过CSS即可完全满足你的需求，核心是使用子元素选择器 + :first-child 伪类 + ::first-letter 伪元素的组合。

核心代码 #

/* 仅匹配article的直接第一个子元素为p标签的场景，设置首字下沉 */
article > p:first-child::first-letter {
  float: left;
  font-size: 3em;
  line-height: 0.8;
  font-weight: 700;
  margin-right: 0.2em;
  /* 可按需自定义颜色、字体等样式 */
  color: #333;
}

逻辑说明 #

• 子组合器>确保只会匹配article的直接子元素，不会命中嵌套在其他容器内的p标签
• :first-child伪类的判定逻辑是：只有该p标签是父元素article的第一个子元素时才会匹配，若article前面有h2、div等其他元素，该选择器不会生效，刚好符合你跳过有前置标题的需求
• 你提到的首个p仅包含img的场景无需额外处理：::first-letter伪元素只会匹配文本首字符，p内没有文本时该规则不会触发，自动兼容你的场景

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