在css中:first-of-type选择器作用

<article>
  <h2>标题</h2>
  <p>第一段文字</p>
  <p>第二段文字</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/gongju/1566">
                            <img src="https://img.php.cn/upload/manual/000/000/003/169232779194530.png" alt="Nextcloud Server">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/gongju/1566">Nextcloud Server</a>
                            <p>Nextcloud服务器是一款免费且开源的服务器软件，它允许您将所有数据存储在您选择的服务器上。通过Nextcloud，您可以轻松访问和存储位于您信任的数据中心的数据，将数据在各种设备之间同步，并共享您的数据以进行协作。它提供了自托管文件同步和共享领域中最佳的安全性，并且可以通过数百个应用进行扩展。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Nextcloud Server">
                                <span>7</span>
                            </div>
                        </div>
                        <a href="/xiazai/gongju/1566" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Nextcloud Server">
                        </a>
                    </div>
                <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
  @@##@@
  @@##@@
  <p>第三段文字</p>
</article>

p:first-of-type {
  color: red;
}
img:first-of-type {
  border: 3px solid blue;
}