Question

简短版本：

使用Chrome，我注意到选择器

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

似乎无法应用第一个字母的样式而不管段落的类，但是如果我之前放置：not pseudo-class，就像在

中那样

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

然后它按照我的预期工作。这是Chrome中的问题，还是CSS选择器的某些方面解释了这一点，我只是不明白？

（此外，如果它不仅仅是Chrome中的一个问题，是否有人可以为此问题提出更好的标题？）

长版：

简短的版本似乎是一个很好的自成一体的问题，但有一些更复杂的背景信息，可能有其自己有趣的后果。（这可能需要它自己的单独问题，或者是另一个错误。非常感谢帮助???）

最初我试图将初始的drop-caps应用于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>

极简缩的CSS：

#main-content p:first-of-type::first-letter,
#main-content hr + p::first-letter {
  /* Drop-cap styles */
}
.subhead::before {
  /* Indent sub-headings with a cute fleuron */
  content: "\00a0\00a0\2767\00a0";
}

在Firefox中进行测试时，这导致段落（1）和（2）具有丢弃大写，这是我想要的。但是在Chrome中，段落（0）的:: before规则中的fleuron也应用了drop-cap样式。我相当自信Firefox在这里出错了，因为：第一个字母应该匹配:: before伪元素中的文本（如果它存在），而是:: before cause：first-letter不匹配任何东西。

在尝试修复Chrome时，我将：not pseudo-class添加到第一个选择器的末尾（请参阅短版本中的第一个CSS规则）。在Firefox中，具有讽刺意味的是，这会像以前一样产生所需的效果，但在Chrome中，现在导致段落（1）不再应用了下拉式样式。那个，我没有解释，但我确定它与.subhead元素无关; Chrome显然从不应用规则，并且遵循水平规则的段落是唯一获得样式的段落。但是如果我在规则的前面移动：not pseudo-class，就像我在短版本中给出的两个替代方案一样，它再次按预期工作。

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

Answer 1

::first-letter和::after / ::before在Firefox中进行互动，但仅限于第一个字符是字母，数字或标点符号。其他符号（如fleuron）似乎被::first-letter忽略，无论::after / ::before是否存在（JSFiddle）。

Chrome是关于:not()和伪元素之间关系的IMO。 The documentation说伪元素必须始终出现在最后（这就是为什么短版本的第一个选择器不起作用）：

每个选择器只能出现一个伪元素，如果存在则必须出现在表示代码的简单选择器序列之后选择者的主题

伪元素与：非伪类

1 个答案: