CSS選擇器：取得第一個具有指定class的元素

Question

我有一堆類別名為 red 的元素，但我似乎無法使用以下 CSS 規則選擇帶有 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 類別的子項目？

Answer 1

:first-child 選擇器的目的是，如名稱所示，選擇父標記的第一個子標記。所以這個例子是可行的（剛剛在這裡嘗試過）：

    
first
    
second

但是，如果您將標籤嵌套在不同的父標籤下，或者您的 red 類別標籤不是父標籤下的第一個標籤，則此方法不起作用。

也請注意，這不僅適用於整個文件中的第一個此類標記，而且每次都有新的父級標記圍繞它時，例如：

    
first
    
second


    
third
    
fourth

first 和 third 將為紅色。

對於您的情況，您可以使用 :nth-of-type 選擇器：

.red:nth-of-type(1)
{
    border:5px solid red;
} 

    blah
    
first
    
second
    
third
    
fourth

感謝 Martyn，他刪除了包含此方法的答案。

有關:nth-child() 和:nth-of-type() 的更多信息，請訪問http://www.quirksmode.org /css/nthchild.html。

請注意，這是一個 CSS3 選擇器，因此一些現在過時的瀏覽器版本可能無法如預期運作（例如 IE8 或更早版本）。請造訪 https://caniuse.com/?search=nth-of-type更多詳細資訊。

Answer 2

這是作者誤解 :first-child 如何運作的最著名的例子之一。 CSS2中引入，:first-child偽類代表其父母的第一個孩子。就是這樣。有一個非常常見的誤解，即它會選擇第一個與複合選擇器其餘部分指定的條件相符的子元素。由於選擇器的工作方式（請參閱這裡 進行解釋），這根本不是真的。

選擇器等級 3 引入了 :first-of- type 偽類別，表示其元素類型的兄弟元素中的第一個元素。 這個答案圖文並茂地解釋了 :first-child 和 :first-of-type 之間的差異。但是，與 :first-child 一樣，它不會查看任何其他條件或屬性。在 HTML 中，元素類型由標籤名稱表示。在問題中，該類型是 p。

不幸的是，沒有類似的 :first-of-class 偽類來匹配給定類別的第一個子元素。在首次發布此答案時，新發布的FPWD選擇器級別4 引入了:nth-match() 偽類，它是圍繞現有選擇器機制設計的，正如我在第一段中提到的，透過新增選擇器清單參數，您可以透過它提供其餘的選擇器複合選擇器以獲得所需的過濾行為。近年來，此功能納入:nth-child( ) 本身，選擇器清單作為可選的第二個參數出現，以簡化事情並避免:nth- match() 在整個文件中匹配的錯誤印象（請參閱下面的最後註釋） .

當我們等待跨瀏覽器支援（說真的，已經過去近10 年了，並且在過去5 年中只有一個實作），這是一種解決方法Lea Verou 和我獨立開發（她先做的！）是先將您想要的樣式應用到該類別的所有元素：

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

...然後使用覆寫規則中的通用同級組合器 ~：

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

現在只有第一個有 class="red" 的元素才會有邊框。

以下是如何應用規則的說明：

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}

  blah         
  
first
  
  
second
 
  
third
  
  
fourth