为啥标准元素上的伪元素样式规则也适用于相关的伪元素？

Posted 2023-03-05

【中文标题】为啥标准元素上的伪元素样式规则也适用于相关的伪元素？

【英文标题】：Why does a pseudo-element style rule on a standard element apply to a related pseudo-element also?为什么标准元素上的伪元素样式规则也适用于相关的伪元素？

【发布时间】：2021-12-28 16:28:36

【问题描述】：

我想知道为什么这段代码也会改变h1::before 的第一个字母。我搜索了 CSS 的特殊性——它们三个都是相同的，因为它们都有一个元素和一个伪元素（如果我错了，请告诉我）。然后我认为他们应该按顺序执行。这是我脑海中的过程：它会改变h1的第一个字母，然后在h1之前添加一个带有内容的伪元素，然后在之后添加伪元素。第一个字母不会改变。谁能帮我理解一下？

h1::first-letter 
  font-size: 70px;
  font-style: italic;
  color: yellow;


h1::before 
  content: "This is";
  color: green;


h1::after 
  content: "of Website";

<h1>Heading</h1>

【参考方案1】：

生成的代码看起来更像这样：

<h1>
  ::before
  Heading
  ::after
</h1>

::first-letter 不会“创建”新元素，它不同于 ::before 和 ::after。 正如documentation 所说：

::before 伪元素和 content 属性的组合可能会在元素的开头插入一些文本。在这种情况下，::first-letter 将匹配此生成内容的第一个字母。

这就是为什么 ::before 中的文本使用 ::first-letter 属性设置样式的原因。

【参考方案2】：

您的误解可能是 CSS 是按顺序应用的。不是这种情况。 CSS 被编译成一个整体应用的结构，而不是一系列步骤或指令。这不是代码。

适用于 CSS 中任何元素的任何规则，并且未被其他稍后或更具体的规则覆盖的规则都将适用。