为何h1后第二个p元素用CSS相邻选择器设置首字下沉不生效？

问题原因 #

CSS完全支持这类选择器组合写法，语法没有错误，失效是选择器匹配逻辑和你的HTML结构不匹配导致的，具体对应两种失效写法的原因如下：

• 针对h1 + p + p::first-letter不生效
  相邻兄弟选择器+仅匹配直接紧跟在前一个同级元素之后的元素，如果你的h1后第一个p和第二个p之间存在任意其他同级元素（比如分割线<hr>、配图<img>、<script>标签等），该选择器就无法匹配到目标p标签。
• 针对h1 + p:nth-child(2)::first-letter不生效
  首先这个写法的逻辑本身不符合你的需求：h1 + p已经命中了h1后的第一个p标签，附加的:nth-child(2)是额外要求这个p必须是父容器的第2个同级子元素，完全无法匹配到第二个p。其次:nth-child()的计数规则是统计父容器下所有同级子元素，不是仅统计p标签，即使你调整写法也很容易因为其他元素的插入导致计数偏移。

正确写法推荐 #

使用通用兄弟选择器~搭配nth-of-type()实现需求，兼容性好且不受中间插入其他元素的影响：

h1 ~ p:nth-of-type(2)::first-letter {
  /* 首字下沉样式示例 */
  float: left;
  font-size: 2em;
  font-weight: bold;
  margin-right: 4px;
  line-height: 1;
}

注：如果要确保::first-letter生效，需要保证目标p标签为块级元素（p默认是块级，若手动设置了display: inline/inline-block会导致效果失效），且段落首字符为正常文本字符，不是标点、空格、特殊符号。

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