css选择器：第一段'；div中的第一个字母

从前

美丽的公主。。

我如何（在css中）选择该div中第一段的第一个字母？？

谢谢

---

Luca

您可以使用CSS

：first letter

伪元素将样式应用于块级元素的第一个字母。

是的，它实际上非常简单：

<div>
 <p>
  Once upon a time..
 </p>
 <p>
  A beautiful princess..
 </p>
</div>

---

CSS：第一个字母选择器

div p:first-of-type:first-letter { font-weight: bold; }

注意：以下属性可用于：第一个字母

字体属性， 颜色属性， 背景属性， 保证金属性， 填充属性， 边界属性， 文字装饰， 垂直对齐（仅当浮动为“无”时）， 文本转换， 线条高度， 浮动

---

清除

好吧，我至少会向您希望应用第一个字母样式的元素添加一个类。我相信您可以为第一个div的第一段执行css规则；但是如果你碰巧有另一个div开头有一个段落，那么它将应用于所有div。换句话说，如果不在选择器中使用class/id，它将应用于每个DIV第一段的第一个字母（这可能不是您要寻找的行为）。因此，我建议：

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

---

但是如果我的直觉是错误的，并且你肯定知道这就是你在寻找的，那么@Demian Brecht的答案应该可以。

在某些情况下，你可能会在

之前有一个标题或一些其他元素类型，例如：

.FirstLetter:first-letter {
   // styling rules here
}

谢谢你抽出时间

您可以直接针对整个div的第一个字母：

div p:first-of-type:first-letter{
/* add your awesome code here */
}

演示：
谢谢您的帮助：在这种情况下，第一种类型肯定更好。
.FirstLetter:first-letter {
   // styling rules here
}

<div>    
<h1>My Great Title</h1>
<p>
In my younger years I was a great man, but all that changed when I saw...
</p>
<p>
I struck him for shaming my name, my family, my life. It was a shameful...
</p>
</div>

div p:first-of-type:first-letter{
/* add your awesome code here */
}

div:first-letter {
    color: red;
}