Question

我需要格式化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我不能选择文章的第一个孩子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;
}

See the jsFiddle demo

否则我认为你必须使用一些覆盖来达到预期的效果。

一些解释

negation pseudo-class :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，如果它是p.quote，并将规则应用到:first-letter。

Answer 2

为什么不使用<q>或<blockquote>作为报价？然后你可以使用

p:first-of-type:first-letter

Answer 3

 p.dropCap:first-child:first-letter {
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}

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

3 个答案:

一些解释