为什么首字不能下沉不能显示。

img


为什么首字不能下沉不能显示，是我哪里写错了吗？应该不是软件的原因吧？

first-child 表示父元素第一个元素,选择的是 h1这个标签



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: #ff0;
            font-size: 3em;
        }
        p:first-of-type::first-letter{
            font-size: 2em;
            color: #F9090D;
        }
    </style>
</head>

<body>
    <h1>逍遥游</h1>
    <h4>庄子</h4>
    <p> 北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼,北冥有鱼</p>
    <script>
      

    </script>
</body>

</html>


p::first-letter{
  color:#F9090D;
  font-size: 2em; 
}

定个div包在里面用class=“dyfirst”

dyfirst {
width:300px;
border:1px solid #ddd;
padding:5px;
font-size:12px;
margin:5px 0;
}
.dyfirst:first-line {
color:#050;
}
.dyfirst:first-letter {
font-size:300%;
float:left;
}