涉及伪类first-child和dropcap的CSS选择器(CSS selector involving pseudo class first-child and dropcap)

 我需要格式化HTML，如下所示。 基本上一个报价是可选的 ，我需要dropcap正文段落的第一个字母。 
 
<article>
 <p class="quote"> <!-- quote is optional -->
   Genius begins great works; labor alone finishes them.-- Joseph Joubert
 </p>
 <p> <!-- "L" is a dropcap -->
  Life is like a box of chocolates.
 </p>
 <p>...</p>
 <p>...</p>
</article> 
 
 我的CSS看起来像这样： 
 
article > p:first-child:first-letter
{
 float: left;
 font-family: Georgia, serif;
 font-size: 360%;
 line-height: 0.85em;
 margin-right: 0.05em;
}
p.quote {
 font-weight: bold;
}
 
 当引用报价时，它目前不起作用。 AFAIK我不能选择文章的第一个孩子P，这不是课程“报价”。 如果我无法弄清楚这个问题，我会使用jQuery，但现在我正在寻找一种方法来实现CSS。 
 
 提前致谢！ 

I need to format HTML similar to below. Basically a quote is optional, and I need to dropcap the first letter of the body paragraph. 
 
<article>
 <p class="quote"> <!-- quote is optional -->
   Genius begins great works; labor alone finishes them.-- Joseph Joubert
 </p>
 <p> <!-- "L" is a dropcap -->
  Life is like a box of chocolates.
 </p>
 <p>...</p>
 <p>...</p>
</article> 
 
My CSS looks like this: 
 
article > p:first-child:first-letter
{
 float: left;
 font-family: Georgia, serif;
 font-size: 360%;
 line-height: 0.85em;
 margin-right: 0.05em;
}
p.quote {
 font-weight: bold;
}
 
It doesn't work currently when the quote is introduced. AFAIK I can't select the article's first child P which is not class "quote." I'll use jQuery if I can't figure this out, but for now I'm looking for a way to do it CSS only. 
 
Thanks in advance! 

原文：https://stackoverflow.com/questions/5217086