css选择器：div中第一段的第一个字母答案

【问题标题】：css selector: first paragraph's first letter inside a divcss选择器：div中第一段的第一个字母
【发布时间】：2017-06-29 16:30:38
【问题描述】：

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

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

谢谢

卢卡

【问题讨论】：

标签： css html css-selectors

【解决方案1】：

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

【讨论】：

【解决方案2】：

在某些情况下，<p> 之前可能有标题或其他一些元素类型，例如：

<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>

所以在这种情况下，p:first-child 出于某种原因将不起作用，至少在 Chrome 或 Safari 中不起作用。

所以你会想要使用这个：

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

感谢您的宝贵时间。

first-of-type

【讨论】：

谢谢。 :first-of-type 在这种情况下肯定更好。

【解决方案3】：

您可以使用 CSS :first-letter 伪元素将样式应用于块级元素的第一个字母。

【讨论】：

【解决方案4】：

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

<div>
 <p class="FirstLetter">
  Once upon a time..
 </p>
 <p>
  A beautiful princess..
 </p>
</div>

然后在你的 css 中：

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

但是，如果我的直觉不正确，并且您确定这就是您要寻找的东西，那么@Demian Brecht 的回答应该没问题。

【讨论】：

【解决方案5】：

是的，其实很简单：

div p:first-letter

【讨论】：

【解决方案6】：

CSS :首字母选择器

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

Working example HERE

注意：以下属性可以与 :first-letter 一起使用

字体属性，颜色属性，背景属性，边距属性，填充属性，边框属性，文字装饰，垂直对齐（仅当 float 为 'none' 时），文本转换，线高，漂浮，清除

【讨论】：

【解决方案7】：

可以直接定位整个div的首字母：

div:first-letter {
    color: red;
}

演示：https://codepen.io/anon/pen/gRoypa

【讨论】：