如果有兩個子元素嵌套在具有 ID 的 div 中，您如何 select 第一個子元素並更改 CSS 中的第一個字母？

Question

我是一名從事項目的新程序員，我希望能夠更改具有 id 的<div>下的第一個<p>的第一個字母。 此時我的代碼如下所示：

 #content>p:first-letter { font-size: 32px; }

 <div id="content"> <h2 role="heading">This demonstrates absolute positioning</h2> <p>Static positioning is the default and relative is much like static but the difference is the box with relative can be offset from its original position with the properties top, right, bottom, left.</p> <p>As we can see with this demonstration of absolute positioning, the navigation to the left is placed out of the normal flow of the page and delivers it to a world all on its own. It can be placed anywhere on the page we want it to be.</p> </div>

結果如下所示：

兩段都有大的首字母

我已經嘗試了幾乎所有將:first-child添加到代碼中的變體，但我無法讓它工作。

Answer 1

將:first-of-type添加到組合中：

 #content>p:first-of-type:first-letter { font-size: 32px; }

 <div id="content"> <h2 role="heading">This demonstrates absolute positioning</h2> <p>Static positioning is the default and relative is much like static but the difference is the box with relative can be offset from its original position with the properties top, right, bottom, left.</p> <p>As we can see with this demonstration of absolute positioning, the navigation to the left is placed out of the normal flow of the page and delivers it to a world all on its own. It can be placed anywhere on the page we want it to be.</p> </div>

Answer 2

這將適用於您的示例 cpde

 #content { font-size: 14px; } #content *:first-child + p::first-letter { font-size: 32px; color: blue; }

 <div id="content"> <h2 role="heading">This demonstrates absolute positioning</h2> <p>Static positioning is the default and relative is much like static but the difference is the box with relative can be offset from its original position with the properties top, right, bottom, left.</p> <p>As we can see with this demonstration of absolute positioning, the navigation to the left is placed out of the normal flow of the page and delivers it to a world all on its own. It can be placed anywhere on the page we want it to be.</p> </div>