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

Question

我一直在研究 CSS Pseudo-Classes，并且一直在玩一些可用的类，以了解可以做什么和不可以做什么。

我的问题是：

我想使用 :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;
}

两个运算符之间不需要空格。

然而这将选择所有p 元素，它们是第一个子元素。如果您只想在页面上的每个 p 元素上执行此操作而不考虑嵌套，则需要添加更多特异性

Answer 2

去掉空格，不需要：

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

使用空格，您希望设置p:first-child 任何后代的第一个字母的样式，而不是p:first-child 本身。

请注意，:first-child 是 pseudo-class，:first-letter 是 pseudo-element。在组合选择器时，伪元素的规则略有不同，您必须牢记这一点（即，每个选择器只能有一个伪元素，并且它必须排在最后，所以像p:first-letter:first-child无效）。

Answer 3

去掉伪类和伪元素之间的空格：

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

jsFiddle example