我需要格式化类似于下面的 HTML。基本上一个报价是optional，我需要将正文段落的第一个字母大写。
<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，它不是类“quote”。如果我无法解决这个问题，我将使用 jQuery，但目前我正在寻找一种仅使用 CSS 的方法。
提前致谢！
如果您可以使用 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 演示 http://jsfiddle.net/BoltClock/kZ7u9
否则我认为你必须进行一些覆盖才能获得所需的效果。
一些解释
The 否定伪类:not() http://www.w3.org/TR/css3-selectors/#negation总是被处理独立地复合选择器中的所有其他类型、ID、类和伪类。这与您如何与其他选择器安排它无关。
换句话说：你不能使用:not()从与简单选择器的其余部分匹配的选择中删除或过滤掉与否定中的内容匹配的元素。这也意味着与:*-child() and :*-of-type()伪类不受:not().
所以上面的第一个选择器，
article > p:not(.quote):first-child:first-letter
工作原理大致如下：
-
找到每一个p元素。
-
如果找到，请检查是否有此p is the :first-child and如果它是:not(.quote).
- 如果不是第一个孩子，请忽略。
- 如果它有
quote类，忽略。
-
如果它与两个伪类都匹配，请检查这是否p是一个孩子article.
如果是这样，抓住它:first-letter.
应用规则。
另一方面，第二个选择器相对简单：
article > p.quote:first-child + p:first-letter
它所做的就是采取p就在第一个孩子之后article如果它是一个p.quote，并将规则应用于其:first-letter.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
