CSS选择器，涉及伪类的第一个孩子和dropcap

小编典典

CSS选择器，涉及伪类的第一个孩子和dropcap

css

我需要格式化类似于下面的HTML。基本上，引号是 可选的 ，我需要删除正文段落的首字母。

<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我无法选择不是“
quote”类的文章的第一个子项P。如果无法弄清楚，我将使用jQuery，但现在我正在寻找一种仅使用CSS的方法。

提前致谢！

阅读 588

2020-05-16

共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;
}

否则，我认为您必须进行一些替代才能获得所需的效果。

一些解释

所述否定伪类:not()总是处理独立地在化合物选择所有其他类型，ID和类和伪类。不管您如何与其他选择器一起安排它。

换句话说，您不能使用:not()从简单选择器其余部分匹配的选择中删除或过滤出与否定条件匹配的元素。这也意味着与:*-child()和:*-of-type()伪类匹配的元素集不受的影响:not()。

所以上面的第一个选择器

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

大致是这样的：

找到每个p元素。
- 如果找不到，请忽略。
如果找到，请检查是否p为:first-child ，如果为:not(.quote)。
- 如果不是第一个孩子，请忽略。
- 如果具有quote该类，请忽略。
如果它与两个伪类都匹配，请检查这是否p是的子类article。
- 如果没有，请忽略。
如果是这样，请抓住它:first-letter。
应用规则。

另一方面，第二个选择器相对简单：

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

它所要做的p就是将第一个孩子之后的，article如果它是a p.quote，然后对其应用规则:first-letter。

2020-05-16