使段落的第一个字母更大

时间:2014-02-19 22:17:09

标签: html css html5 css3

我正在处理HTML分配。这是基本的CSS东西(外部样式表),我差不多完成了。一切都按照应有的方式运作,除了一部分,我无法弄清楚为什么。

</header>

     <article>
        <h2>About the Course</h2>
        <p>
           The Civil War and Reconstruction
           explores the causes and consequences of the American 
           Civil War, covering American history from 1840 through 1876 in
           great detail. My primary goal is to interpret the multiple 
           threads that run through this epic event and consider how these
           threads still engage the politics and culture of the 
           present day. In this course we will rely heavily on primary
           texts, interpreting the events of the day through the words of
           those men and women who experienced it. We'll examine four main
           points of interest:
        </p>
        <ul>

因此,对于此作业#21的21个要求是:

  

对于文章中h2标题之后的第一段   元素,创建样式规则以显示带字体的第一个字母   大小为32像素。

所以我这样做了:

article h2 p:first-of-type:first-letter {
font-size: 32px;
}

这不起作用,所以我将其更改为:

article > h2 p:first-of-type:first-letter {
 font-size: 32px;
}

仍然不起作用!

2 个答案:

答案 0 :(得分:10)

该段落不是<h2>的后代,而是之后的。将您的CSS更改为:

article h2 + p:first-letter {
    font-size: 32px;
}

+(相邻兄弟)选择器将直接在p之后选择第一个h2元素。有一个很好的StackOverflow答案进一步详细解释了这一点here

此外,您不需要:first-of-type伪选择器,因为+仅选择第一个元素。

答案 1 :(得分:3)

article h2 + p:first-letter {
    font-size: 32px;
}