CSS选择器涉及伪类first-child和dropcap [英] CSS selector involving pseudo class first-child and dropcap

问题描述

我需要格式化HTML类似于下面。基本上，报价是可选，我需要删除正文段落的第一个字母。

 < article& 
< p class =quote> <！ -  quote是可选的 - > 
天才开始伟大的作品;劳动独自完成他们。约瑟夫·朱伯特
< / p> 
< p> <！ - L是dropcap  - > 
生活就像一盒巧克力。 
< / 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。

提前感谢！

解决方案

如果您可以使用CSS3选择器，请尝试使用这些（组合在一起）：

  / *选择第一个子项，如果它不是.quote * / 
文章> p：not（.quote）：first-child：first-letter，
 / *或者，如果第一个子节点是.quote，请选择以下代替* / 
 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演示

否则，我认为你必须使用一些覆盖来获得所需的效果。 p>

有些解释

negation pseudo-class ：not（） 始终处理独立类型，ID，类和伪类。

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

的影响所以上面的第一个选择器， / p>

  article> p：not（.quote）：first-child：first-letter 
  

/ p>

1. 查找每个 p 元素。

   
   
   
   
   
   • 如果未找到，请忽略。
     
     
     
   
   



2. 如果找到，请检查此 ：：first-child 和 / code>。

   
   
   
   
   
   • 如果不是第一个孩子，请忽略。
   
   
   • 它有引用类，忽略。
     
     
     
   
   



3. 如果匹配这两个伪类， code> p 是的子。

   
   
   
   
   
   • 如果不是，请忽略。
     
     
     
   
   



4. 如果是，请获取




$ b

另一方面，第二个选择器是相对直接的：

  p.quote：first-child + p：first-letter 
  

如果是 p.quote ，则文章的第一个子元素之后紧跟的 p $ c>，并对其：第一个字母应用规则。




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!

解决方案

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

See the jsFiddle demo

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

Some explanation

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.

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

works roughly like this:

1. Find every p element.

   • If not found, ignore.
     
     

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

   • If it's not the first child, ignore.
   • If it has the quote class, ignore.
     
     

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

   • If not, ignore.
     
     

4. If so, grab its :first-letter.

5. Apply rules.

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

article > p.quote:first-child + 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.

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