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