我有一堆類名為 red 的元素，但我似乎無法使用以下 CSS 規(guī)則選擇帶有 class="red" 的第一個元素：
.home .red:first-child {
border: 1px solid red;
}
<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
此選擇器有什么問題，如何更正它以定位第一個具有 red 類的子項？
2
0
0
:first-child 選擇器的目的是，如名稱所示，選擇父標記的第一個子標記。所以這個例子是可行的（剛剛在這里嘗試過）：
first
second
但是，如果您將標簽嵌套在不同的父標簽下，或者您的 red 類標簽不是父標簽下的第一個標簽，則此方法不起作用。
還請注意，這不僅適用于整個文檔中的第一個此類標記，而且每次都有新的父級標記圍繞它時，例如：
first
secondthird
fourth
first 和 third 將為紅色。
對于您的情況，您可以使用 :nth-of-type 選擇器：
.red:nth-of-type(1)
{
border:5px solid red;
}
blahfirst
second
third
fourth
感謝 Martyn，他刪除了包含此方法的答案。
有關(guān) :nth-child() 和 :nth-of-type() 的更多信息，請訪問 http://www.quirksmode.org/css/nthchild.html。
請注意，這是一個 CSS3 選擇器，因此一些現(xiàn)在過時的瀏覽器版本可能無法按預(yù)期運行（例如 IE8 或更早版本）。訪問 https://caniuse.com/?search=nth-of-type更多詳細信息。
這是作者誤解 :first-child 如何工作的最著名的例子之一。 CSS2中引入，:first-child偽類代表其父母的第一個孩子。就是這樣。有一個非常常見的誤解，即它會選擇第一個與復(fù)合選擇器其余部分指定的條件相匹配的子元素。由于選擇器的工作方式（請參閱這里 進行解釋），這根本不是真的。
選擇器級別 3 引入了 :first-of- type 偽類，表示其元素類型的兄弟元素中的第一個元素。 這個答案圖文并茂地解釋了 :first-child 和 :first-of-type 之間的區(qū)別。但是，與 :first-child 一樣，它不會查看任何其他條件或?qū)傩?。?HTML 中，元素類型由標簽名稱表示。在問題中，該類型是 p。
不幸的是，沒有類似的 :first-of-class 偽類來匹配給定類的第一個子元素。在首次發(fā)布此答案時，新發(fā)布的 FPWD選擇器級別 4 引入了 :nth-match() 偽類，它是圍繞現(xiàn)有選擇器機制設(shè)計的，正如我在第一段中提到的，通過添加選擇器列表參數(shù)，您可以通過它提供其余的選擇器復(fù)合選擇器以獲得所需的過濾行為。近年來，此功能納入 :nth-child( ) 本身，選擇器列表作為可選的第二個參數(shù)出現(xiàn)，以簡化事情并避免 :nth-match() 在整個文檔中匹配的錯誤印象（請參閱下面的最后注釋） .
當我們等待跨瀏覽器支持時（說真的，已經(jīng)過去近 10 年了，并且在過去 5 年中只有一個實現(xiàn)），這是一種解決方法 Lea Verou 和我獨立開發(fā)（她先做的！）是首先將您想要的樣式應(yīng)用到該類的所有元素：
/*
* Select all .red children of .home, including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid red;
}
...然后使用覆蓋規(guī)則中的通用同級組合器 ~：
/*
* Select all but the first .red child of .home,
* and remove the border from the previous rule.
*/
.home > .red ~ .red {
border: none;
}
現(xiàn)在只有第一個帶有 class="red" 的元素才會有邊框。
以下是如何應(yīng)用規(guī)則的說明：
.home > .red {
border: 1px solid red;
}
.home > .red ~ .red {
border: none;
}
blahfirst
second
third
fourth
