CSS 伪类组合 :first-child 和 :first-letter

Question

我一直在研究 CSS 伪类，并且一直在尝试一些可用的类，以了解可以做什么和不能做什么。

我的问题是：

我想使用 :first-child 选择器来定位出现的段落的第一个实例

例如：

p:first-child  {
  color:#333;
  font-weight:800;
}

我还想做的是选择第一段的第一个字母并增加第一个字母的字体大小

要选择每个段落的第一个字母，我将使用以下 css：

p:first-letter {
font-size:1.6em;
}

但是，通过上面的代码，我定位了每个 p 文本块的第一个字母，并且我只想定位第 1 段的第一个字母

我尝试了以下代码来定位我所需的元素，但它不起作用

p:first-child :first-letter {
font-size:1.6em;
}

有人知道我怎样才能达到我上述的要求吗？

Answer 1

做：

p:first-child:first-letter {
    font-size:1.6em;
}

两个操作员之间不需要空间。

但是这将选择所有第一个子元素

元素。如果您只想在页面上的每个

元素上执行此操作（无论嵌套如何），则需要添加更多特异性

Answer 2

去掉空格，不需要：

p:first-child:first-letter {
font-size:1.6em;
}

使用空格，您希望为

p:first-child

的任何后代的第一个字母设置样式，而不是

p:first-child

本身。

注意

:first-child

是一个伪类，

:first-letter

是一个伪元素。在组合选择器时，伪元素的规则略有不同，这是您必须记住的事情（即，每个选择器只能有一个伪元素，并且它必须放在最后，所以类似

p:first-letter:first-child

将无效）。

Answer 3

删除伪类和伪元素之间的空格：

p:first-child:first-letter {
    font-size:1.6em;
}

Answer 4

:initial-letter

已在 Chrome/Edge/Safari 上可用，但尚未在 Firefox 上可用。