涉及伪类first-child和dropcap的CSS选择器

Question

我需要格式化HTML,类似于下面.基本上引用是可选的,我需要删除body段的第一个字母.

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

提前致谢!

Answer 1

如果您对使用CSS3选择器没问题,请尝试使用这些(组合在一起):

/* Select the first child if it's not a .quote */
article > p:not(.quote):first-child:first-letter, 
/* Or, if the first child is a .quote, select the following one instead */
article > p.quote:first-child + p:first-letter
{
 float: left;
 font-family: Georgia, serif;
 font-size: 360%;
 line-height: 0.85em;
 margin-right: 0.05em;
}

请参阅jsFiddle演示

否则我认为你必须使用一些覆盖以获得所需的效果.

一些解释

所述否定伪类:not()总是处理独立地的所有其它类型的,ID和在该化合物中选择的类和伪类.这与您与其他选择器的排列方式无关.

换句话说:你不能使用:not()从与简单选择器其余部分匹配的选择中删除或过滤掉与否定内容匹配的元素.它还意味着由:*-child()和:*-of-type()类匹配的元素集不受影响:not().

所以上面的第一个选择器,

article > p:not(.quote):first-child:first-letter

工作大致如下:

1. 找到每个p元素.

   • 如果没有找到,请忽略.
     
     

2. 如果找到,请检查这是否p是:first-child ,如果是的话:not(.quote).

   • 如果它不是第一个孩子,请忽略.
   • 如果有quote类,请忽略.
     
     

3. 如果它匹配两个伪类,请检查它是否p是子类article.

   • 如果没有,请忽略.
     
     

4. 如果是这样,抓住它:first-letter.

5. 适用规则.

另一方面,第二个选择器相对简单:

article > p.quote:first-child + p:first-letter

所有这p一切都是在第一个孩子之后,article如果它是a p.quote,并将规则应用于它:first-letter.