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

Question

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

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

- Yishu Fang

Answer 1

选择器p::first-letter选中了

标签内的第一个字母，而p ::first-letter则选中了

标签子元素内的第一个字母。

p ::first-letter等同于p *::first-letter。以下是规范中的说明：

如果由*（即没有命名空间前缀）表示的通用选择器不是一系列简单选择器选择器中的唯一组件，或者紧跟着一个伪元素，则可以省略*，并暗示通用选择器的存在。

注意：尽管选择器（p ::first-letter）本身指向所有子元素内的第一个字母，但::first-letter选择器仅适用于块级元素或内联块级元素，因此除非修改其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>

- Harry

---

你真的应该将这些标记为重复。 :) - Paulie_D

@Paulie_D 用web-tiki来解决它。我保留了我的答案，因为我们中的一些人认为我的答案包含更多信息。 - Harry

没问题，我已经整理好了我的注释，你也可以这样做。 - Paulie_D

Answer 2

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

- kojow7

---

不是真的。空格表示选择器是后代组合器（即选择p标签内所有子元素、孙子元素等的第一个字母）... - War10ck

我改正了我的说法。 - kojow7