css选择器：第一段的第一个字母在div内

Question

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

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

感谢

卢卡

Answer 1

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

Answer 2

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

Answer 3

是的，它实际上很简单：

div p:first-letter 

Answer 4

CSS：第一个字母的选择

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

Working example HERE

注：以下属性可用于：首字母

个

字体属性， 颜色属性， 背景属性， 余量性能， 填充性能， 边框属性， 文字修饰， 垂直对齐（仅当浮子是“无”）， 文本变换， line-height， float， 明确

Answer 5

那么，我会添加至少一个类，你想要的第一个字母样式应用到的元素。我相信你可以为第一个div的第一段做一个css规则;但如果你在开始时碰巧有另一个段落，那么它将被应用于所有这些。换句话说，没有在你选择使用类/ 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布莱希特的答案应该没问题。

Answer 6

在某些情况下，你可能有一个标题或一些其他元素<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或工作，至少不苹果浏览器。

所以不是你想要使用此：

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

谢谢您的时间。

first-of-type

Answer 7

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

div:first-letter { 
    color: red; 
} 

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