首頁  >  問答  >  主體

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

我有一堆類別名為 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 類別的子項目?

P粉170438285P粉170438285224 天前805

全部回覆(2)我來回復

  • P粉131455722

    P粉1314557222024-03-26 12:13:27

    :first-child 選擇器的目的是,如名稱所示,選擇父標記的第一個子標記。所以這個例子是可行的(剛剛在這裡嘗試過):< /p>

    
        

    first

    second

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

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

    first

    second

    third

    fourth

    firstthird 將為紅色。

    對於您的情況,您可以使用 :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更多詳細資訊。

    回覆
    0
  • P粉996763314

    P粉9967633142024-03-26 11:52:20

    這是作者誤解 :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

    回覆
    0
  • 取消回覆