在 CSS 中，我們可以使用同名類選擇器來選取 HTML 元素。但當一個元素有多個同名類名時，我們該如何選取其中的一個呢？

這時候可以使用:first-of-type或:first-child選擇器來選取同名類名下的第一個元素。

/* 選取同名類名下的第一個元素 */ 
.same-class:first-of-type {
/* CSS 屬性 */
}
/* 選取同名類名下的第一個子元素 */ 
.parent-class:first-child {
/* CSS 屬性 */
}

值得注意的是，:first-of-type選擇器是根據元素的類型進行比較的，而:first-child選擇器是根據元素在父元素中的位置進行比較的。所以，在使用這兩個選擇器時，需要根據具體的需求來選擇合適的方式。

比如，對于以下 HTML 結構：

<div class="box">
<h2 class="title">標題1</h2>
<p class="content">內容1</p>
<p class="content">內容2</p>
</div>

如果我們想選擇.content中的第一個元素，可以使用:first-of-type選擇器：

/* 選取第一個 .content 元素 */
.content:first-of-type {
/* CSS 屬性 */
}

但是，如果我們想選擇.title后面的.content元素，即第二個.content，則需要使用:first-child選擇器：

/* 選取 .title 后面的第一個 .content 元素 */
.content:first-child {
/* CSS 屬性 */
}