??? ??? ?? ? ?? ??? ?? ????. red
的元素,但我似乎無法使用以下 CSS 規(guī)則選擇帶有 class="red"
:
??? ???
? ???? ???? ???? red
??? ? ?? ???? ???? ??? ??? ???? ????
:first-child
???? ??? ???? ? ? ??? ?? ??? ? ?? ?? ??? ???? ????. ??? ? ?? ?????(??? ???? ??? ???):
???
??? ??? ?? ?? ?? ??? ???? ??? red
??? ??? ?? ?? ??? ? ?? ??? ?? ???? ? ??? ???? ????.
?? ?? ?? ??? ? ?? ???? ???? ?? ??? ?? ??? ??? ?? ??? ?? ??? ?????. ?:
???first
和 third
???? ???.
??? ???? :nth-of-type
???? ??? ? ????:
? ??? ??? ??? ??? Martyn?? ??????.
:nth-child()
和 :nth-of-type()
? ?? ??? ??? ??? http://www.quirksmode.org/css/nthchild.html? ?????.
CSS3 ?????? ?? ??? ?? ???? ??(?: IE8 ??)? ???? ???? ?? ? ????. ??? ??? https://caniuse.com/?search=nth-of-type? ?????.
??? :first-child
如何工作的最著名的例子之一。 CSS2中引入,:first-child
?? ???? ??? ? ??? ????? ??? ?????. ?? ??. ??? ?? ???? ??? ??? ???? ? ?? ?? ??? ????? ?? ???? ??? ????. ???? ???? ???? ??(??? ?? ??) ?? ??? ????.
??? ?? 3?? ?? ??? ?? ?? ? ? ?? ??? ???? :first-of-type
?? ???:first-of- type
偽類,表示其元素類型的兄弟元素中的第一個元素。 這個答案圖文并茂地解釋了 :first-child
和 :first-of-type
之間的區(qū)別。但是,與 :first-child
一樣,它不會查看任何其他條件或?qū)傩?。?HTML 中,元素類型由標簽名稱表示。在問題中,該類型是 p
? ???????. ? ??? ???? ???? ????. ? ??? :first-child
? :first-of-type
? ??????. ??? :first-child
? ????? ?? ???? ??? ???? ????. HTML?? ?? ??? ?? ???? ?????. ???? ??? p
???.
????? ?? ???? ? ?? ?? ??? ???? ??? :first-of-class
?? ???? ????. ? ??? ?? ????? ? ??? ??? FPWD ??? ?? 4??? ?? ??? ????? ???? ??? :nth-match()
?? ??? :first-of-class
偽類來匹配給定類的第一個子元素。在首次發(fā)布此答案時,新發(fā)布的 FPWD選擇器級別 4 引入了 :nth-match()
偽類,它是圍繞現(xiàn)有選擇器機制設(shè)計的,正如我在第一段中提到的,通過添加選擇器列表參數(shù),您可以通過它提供其余的選擇器復合選擇器以獲得所需的過濾行為。近年來,此功能納入 :nth-child( )
本身,選擇器列表作為可選的第二個參數(shù)出現(xiàn),以簡化事情并避免 :nth-match()
? ? ?? ???? ??? ??? ??? ?? ????? ???? ??? ??? ? ????. ??? ??? ??? ?? ?? ??? ??? ??? ???? ?????. ?? ? ? ?? ? ??? ? ???????. nth-child( )
??
:nth-match()
? ?? ???? ????? ??? ??? ??? ?? ??? ? ?? ??? ?????(?? ?? ??? ??) .??? ??? ???? ??? ???? ??(?? 10?? ??? ?? 5? ?? ??? ? ? ???????) ?? ??? ??? ????. Lea Verou? ?? ????? ??????. (??? ?? ?? ?? ? ??! )? ?? ?? ???? ?? ??? ??? ???? ???? ????.
????...?? ?? ???? ?? ?? ???? ??????. ~
:
?? class="red"
? ?? ? ?? ???? ???? ????.
??? ??? ???? ??? ?? ?????.