css - :first-child selecting two elements

Question

我正在尝试使用下面的 CSS 仅设置文本“Portfolio”的格式。但是，这也同时选择了文本“Client”。我不明白为什么我选择 :first-child 时会出现这种情况？是不是因为我有第二个类 .group2，它使文本“client”成为第一个 child ？虽然它仍然不是投资组合的第一个 child 。这是什么逻辑？

<div class="portfolio">
    <div class="container">
        <h3>Portfolio</h3>
    <div class="group1">
        <img src="http....." style="height: 506px; width: 675px">
    <div class="group2">
        <h3>Client</h3>
        <h4>JPMorgan</h4>
        <h3>Role in Project</h3>
        <h4>Project Lead</h4>
        <h3>Project Included</h3>
        <h4>Mobile and Web Interface</h4>
        <a href="#">Browser</a>
    </div>
    </div>
    </div>
    </div>

<style>    

 .portfolio h3:first-child {
 color: #292929;
 border-bottom: 3.5px solid #E1E1E1;
 width: 130px;
 margin: 0px auto;
 font-size: 1.5em;
 text-transform: uppercase;
 text-shadow: 0px 0px 1px #292929;
 text-align: center;
 padding-bottom: 10px;
 font-family: inherit;
 }
</style>

Answer 1

试试这个:

.container > h3 {
 color: #292929;
 border-bottom: 3.5px solid #E1E1E1;
 width: 130px;
 margin: 0px auto;
 font-size: 1.5em;
 text-transform: uppercase;
 text-shadow: 0px 0px 1px #292929;
 text-align: center;
 padding-bottom: 10px;
 font-family: inherit;
 }