为什么作用在普通元素上的伪元素样式规则会同时作用于关联伪元素？

首先纠正两个认知偏差 #

• 优先级规则并非该现象的核心影响因素：CSS优先级仅在多个选择器命中同一个元素的同一个样式属性时才用来判断覆盖逻辑，你提到的三个选择器原本作用于不同对象，只有当::first-letter刚好命中::before生成内容的首字符时，才会出现同字符的样式冲突，此时才会涉及层叠计算。
• 渲染流程的理解错误：::before和::after生成的内容不是独立于h1的外部元素，而是会插入到h1的内部内容流的首尾，属于h1内容的一部分，完全参与h1的排版规则计算。

底层实现逻辑 #

根据CSS官方规范定义：::first-letter伪元素的作用范围是宿主元素第一个格式化行的首个可匹配字符，包含::before生成的内容：

1. 你提供的代码中，h1最终的完整内容流拼接顺序为：::before生成的This is + 原标签内的Heading + ::after生成的of Website
2. 整个文本流的第一个字符是::before内容里的大写字母T，自然会被h1::first-letter选中，应用你设置的字号、斜体、黄色样式
3. 首字母最终显示为黄色而非::before设置的绿色，是因为规范明确规定::first-letter、::first-line的样式优先级高于生成内容（::before/::after）的同属性样式，和声明顺序无关。

可选修复方案 #

如果希望::before的首字母不被::first-letter命中，只需给::before设置display: inline-block即可，此时::before会成为独立的格式化单元，内部字符不会被外部的::first-letter匹配。

/* 修复示例 */
h1::before {
  content: "This is";
  color: green;
  display: inline-block;
}

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