p ::first-letter 和 p::first-letter 有什么区别？

Question

p ::first-letter和p::first-letter有什么区别？

p::first-letter 可以成功 select 段落内的第一个字母，但 p ::first-letter 不能。

Answer 1

p ::first-letter 表示改变 p 的任何后代元素首字母的样式。而p::first-letter表示改变p元素的第一个字母。

Answer 2

选择器 p::first-letter 选择 p 中的第一个字母，而 p ::first-letter 选择 p 的子元素中的第一个字母。

p ::first-letter等同于p *::first-letter。以下是 specs 所说的：

If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.

注意：即使选择器（p ::first-letter）本身指向所有子元素中的第一个字母，::first-letter选择器只对块起作用或行内块元素，因此不会在 span 上工作，除非它的 display 被修改。

p ::first-letter {
  color: red;
}
p::first-letter {
  color: blue;
}

span{
  display: inline-block;
}

<p>Some text <span>inside a span</span> and <span>inside this span too</span>
</p>

p ::first-letter 和 p::first-letter 有什么区别？

What's the difference between p ::first-letter and p::first-letter?

css

css-selectors

pseudo-element