first-childとlast-childのツンデレの原因(対応する要素が得られない)

今日はフロントエンドを書くときに問題に遭遇しました
htmlコードは以下の通りです.

<a href="#" class="button"><</a>
<a href="#" class="button">></a>
<div id="f">F</div>
<div id="s">S</div>
<div id="t">T</div>

cssコードは以下の通りです.

.button:last-child {
    background-color: #ffd700;
}

運転後、2番目のaの背景色が変色していないことに気づき、本当に不思議でした.
考えてみれば、cssコードは間違いなく、HTMLのどこかに問題があるに違いない.何度か修正した後、HTMLとCSSをこのように変更すればいいことに気づいた.

<div>
<a href="#" class="button"><</a>
<a href="#" class="button">></a>
</div>
<div id="f">F</div>
<div id="s">S</div>
<div id="t">T</div>

div .button:last-child {
    background-color: #ffd700;
}

この时私はやっと悟って、first-childとlast-childのこの2つはやはりとてもツンデレでわがままで、もし父の要素の中の子の要素が他の异なるラベルを含むならば、彼らの2つはとても言うことを闻かないのです.
では、彼らはいったいどんな話を聞いているのか、どんな話を聞いていないのか、私が尋ねたところ、結論は
firstを使用すると、最初のサブエレメントは必ず同じラベルになります.真ん中と最後は違うことができます.
lastは逆に、最後の要素は同じで、前と中間は異なることができます.