使段落的第一个字母更大

Mod*_*esi 4 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>
Run Code Online (Sandbox Code Playgroud)

因此,对于这项任务#21的21项要求是:

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

所以我这样做了:

article h2 p:first-of-type:first-letter {
font-size: 32px;
}
Run Code Online (Sandbox Code Playgroud)

那没用,所以我改成了:

article > h2 p:first-of-type:first-letter {
 font-size: 32px;
}
Run Code Online (Sandbox Code Playgroud)

但它仍然不起作用!

Boj*_*les 11

该段不是的后裔<h2>,但之后它.将CSS更改为:

article h2 + p:first-letter {
    font-size: 32px;
}
Run Code Online (Sandbox Code Playgroud)

+(相邻的兄弟)选择器将选择第一个p后直接元件h2.有一个很好的StackOverflow答案在这里进一步详细解释.

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