我有一堆類別名為 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粉1314557222024-03-26 12:13:27
:first-child
選擇器的目的是,如名稱所示,選擇父標記的第一個子標記。所以這個例子是可行的(剛剛在這裡嘗試過):< /p>
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,他刪除了包含此方法的答案。
有關:nth-child()
和:nth-of-type()
的更多信息,請訪問http://www.quirksmode.org /css/nthchild.html。
請注意,這是一個 CSS3 選擇器,因此一些現在過時的瀏覽器版本可能無法如預期運作(例如 IE8 或更早版本)。請造訪 https://caniuse.com/?search=nth-of-type更多詳細資訊。
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; }
blahfirst
second
third
fourth