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。在组合选择器时，伪元素的规则略有不同，这是你必须记住的事情（也就是说，每个选择器只能有一个伪元素，它必须是最后一个，所以像{ {1}}无效）。

Answer 3

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

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