Css 伪元素与：非伪类的交互

简短版本：

使用Chrome，我注意到选择器

#main-content p:first-of-type::first-letter:not(.subhead) { ... }

无论段落的类别如何，似乎都无法应用首字母样式，但是如果我将：not伪类放在前面，就像在

#main-content p:first-of-type:not(.subhead)::first-letter { ... }
#main-content p:not(.subhead):first-of-type::first-letter { ... }

然后它就如我所期望的那样工作了。这是Chrome中的一个问题，还是CSS选择器的某些方面解释了这一点，我只是不明白

（此外，如果这不仅仅是Chrome中的一个问题，有人能为这个问题提供更好的标题吗？）

---

长版本：

简短的版本似乎是一个很好的自足问题，但有一些更复杂的背景信息，可能有自己有趣的结果。（这可能是一个单独的问题，或者是另一个bug。非常感谢您的帮助？？）

起初，我试图对div中的第一段以及随后立即遵循横向规则的任何段落使用首字母大写，除非它们是副标题的一部分。下面是一个高度简化的页面结构模拟：

<div id="main-content">
<section class="panel">
  <header>
    <h1>Welcome Friend!</h1>
    <p class="subhead">This is a subheader! (0)</p>
  </header>
  <div class="customhr"></div> <!-- consciously NOT an hr tag -->
  <p>Here's a paragraph (1)</p>
  <hr>
  <p>First paragraph of a new content section (2)</p>
  <p>And another paragraph. (3)</p>
</section>
</div>

在Firefox中进行测试时，这导致了第（1）和（2）段中出现了首字母大写，这正是我想要的。然而，在Chrome中，段落（0）的：：before规则中的fleuron也应用了下拉帽样式。我相当确信Firefox在这里是错误的，因为：第一个字母应该匹配来自：：before伪元素（如果存在）的文本，但是：：before会导致：第一个字母不匹配任何内容

在尝试为Chrome修复它时，我在第一个选择器的末尾添加了：not伪类（请参阅简短版本中的第一条CSS规则）。具有讽刺意味的是，在Firefox中，这产生了与以前一样的预期效果，但在Chrome中，这现在导致第（1）段不再应用下拉盖样式。对此，我没有任何解释，但我确定这与分目要素无关；Chrome显然从来没有应用过这个规则，只有遵循水平规则的段落才被设置了样式。但是，如果我在规则前面移动：not伪类，就像我在简短版本中给出的两个备选方案一样，它将再次按照预期工作

---

我觉得好像我不知何故同时在Firefox和Chrome中发现了两个不同的bug，但是伪类和伪元素的使用对我来说有点神秘，我对它们没有充分的信心。所以我很好奇a）规范中是否有任何东西可以解释这两种浏览器中的CSS行为是正确的，b）如果没有，这些是否是已知的错误，其行为是否一致，已经在某个地方记录在案。[和c）如果没有，请告诉我您是否计划报告所述错误，以便我不会意外地提交一份副本。]

：第一个字母和
：：在
/
之后：在
之前在Firefox中进行交互，但仅当第一个字符是字母、数字或一些标点符号时。其他符号（如fleuron）似乎被
：：第一个字母
忽略，无论
：：在
/
：：之前是否存在（）

Chrome在
：not（）
和伪元素之间的关系上是正确的。表示伪元素必须始终出现在末尾（这就是为什么短版本中的第一个选择器不起作用）：

每个选择器只能出现一个伪元素（如果存在）
必须出现在表示
选择器的主题

#main-content p:first-of-type::first-letter:not(.subhead) { ... }

另外，这不是问题的一部分，但我觉得我应该澄清一下：我很快意识到：第一个类型规则对于我来说是不必要的，所以我把它去掉了。任何试图通过提供比我开始时更少愚蠢的CSS规则来“回答真实问题”的回答都是不必要的。这个问题纯粹是关于CSS这些方面的行为（无论是在规范中还是在实践中）的学术性问题。太棒了！这是有道理的，并且与我以前认为是高度不一致的例子是一致的。那真是一种解脱。