徹底理解CSS結構偽類選擇器

春雨Peter皮特發表於2019-06-20
選擇器
功能描述
E:firse-child
作為父元素的第一個子元素的元素E。與E:nth-child(1)等同
E:last-child
作為父元素的最後一個子元素的元素E。與E:nth-last-child(1)等同
E:root
選擇匹配元素E所在文件的跟元素。在HTML文件中,跟元素始終是html,此時該選擇器與html型別選擇器匹配的內容相同。
E F:nth-child(n)
選擇父元素E的第N個子元素F。其中N可以是整數(1、2、3)、關鍵字(even、odd)、可以是公式(2n+1、-n+5)而且n值起始值為1
E F:nth-last-child(n)
選擇元素E的倒數第N個子元素f。此選擇器與E F:nth-child(n)選擇器計算順序剛好相反,但使用方法都是一樣的,其中:nth-last-child(1)始終匹配的時最後一個元素,與:last-child等同
E:nth-of-type(n)
選擇父元素內具有指定型別的第N個E元素
E:nth-last-of-typy(N)
選擇父元素內具有指定型別的倒數第N個E元素
E:first-of-type
選擇父元素內具有指定型別的第一個E元素,與:nth-of-type(1)等同
E:last-of-type
選擇父元素內具有指定型別的最後一個E元素,與E:nth-last-of-type(1)等同
E:only-child
選擇父元素只包含一個子元素,且該子元素匹配E元素
E:only-of-type
選擇父元素只包含一個同型別的子元素,且該子元素匹配E元素
E:empty
選擇沒有子元素的元素,而且該元素也不包含任何文字節點。 


相關文章