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

问题描述

我需要格式化类似于下面的 HTML.基本上，引用是可选的，我需要将正文段落的首字母大写.

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> 

我的 CSS 如下所示:

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

目前在引入报价时不起作用.AFAIK 我无法选择文章的第一个子 P，它不是引用"类.如果我无法解决这个问题，我会使用 jQuery，但现在我正在寻找一种仅使用 CSS 的方法.

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.

提前致谢！

推荐答案

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

If you're OK with using CSS3 selectors, try using these (grouped together):

/* 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 演示

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

Otherwise I think you'll have to play with some overrides to get the desired effect.

否定伪类:not() 始终独立处理复合选择器中的所有其他类型、ID、类和伪类.这与您如何与其他选择器一起安排它无关.

The negation pseudo-class :not() is always processed independently of all other types, IDs, classes and pseudo-classes in the compound selector. This is regardless of how you arrange it with your other selectors.

换一种说法:你不能使用 :not() 来删除或过滤掉与否定匹配的元素，从与其余简单匹配的选择中选择器.这也意味着 :*-child() 和 :*-of-type() 伪类匹配的元素集合不受 影响>:not().

To put it another way: you can't use :not() to remove, or filter out, elements that match what's in the negation, from a selection matched by the rest of the simple selector. It also means that the set of the elements matched by the :*-child() and :*-of-type() pseudo-classes is not affected by :not().

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

So the first selector above,

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

大致是这样工作的:

1. 找到每个 p 元素.

• 如果找不到，请忽略.
  
  

如果找到，检查这个p是否是:first-child 和如果是:not(.引用).

If found, check whether this p is the :first-child and if it's :not(.quote).

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

如果匹配两个伪类，检查这个p是否是article的子类.

If it matches both pseudo-classes, check whether this p is a child of article.

• 如果没有，请忽略.
  
  

如果是这样，获取它的 :first-letter.

If so, grab its :first-letter.

应用规则.

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

The second selector, on the other hand, is relatively straightforward:

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

如果它是一个p.quote，它所做的只是取article的第一个孩子之后的p，并应用规则到它的 :first-letter.

All it does is take the p that comes right after the first child of article if it's a p.quote, and apply rules to its :first-letter.

这篇关于涉及伪类 first-child 和 dropcap 的 CSS 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！