通俗解釋CSS3元素選擇器

2021-09-14 00:17:07 字數 1998 閱讀 5102

w3c上關於下列的元素選擇器的解釋讓人有些抓腦,有些不知所云。下面就用比較通俗的形式來解釋比較繞的那幾個元素選擇器。

帶有 child

帶有 type

only-child

only-of-type

first-child

first-of-type

last-child

last-of-type

nth-child(n)

nth-of-type(n)

nth-last-child(n)

nth-last-of-type(n)

:first-child選擇父元素的第乙個元素

p:first-child選擇父元素的第乙個子元素,並且是 p 標籤的元素。注意:是第乙個元素並且是 p 標籤,而不是第乙個 p 標籤

:last-child選擇父元素的最後乙個子元素

p:last-child選擇父元素的最後乙個元素,並且是 p 標籤的元素。注意:是最後乙個元素並且是 p 標籤,而不是最後乙個 p 標籤

:first-of-type選擇父元素中首個(第一次出現的)指定型別的子元素。

p:first-of-type選擇父元素中第一次出現的 p 標籤(第乙個 p 標籤)

:last-of-type選擇父元素中最後的(最後一次出現的)指定型別的子元素

p:last-of-type選擇父元素中最後一次出現的 p 標籤(最後乙個 p 標籤)

:only-of-type選擇父元素中唯一出現的(只出現過一次)的指定型別的子元素。父元素可以有多個子元素,但選擇的是只出現過一次的指定型別的元素

p:only-of-type選擇父元素中只出現過一次的 p 標籤。這個父元素中只有乙個 p 標籤,可以有很多個其他的標籤

:only-child選擇父元素中只有乙個子元素,並且這個元素是指定型別的標籤。父元素只能有乙個子元素

p:only-child選擇父元素中只有乙個子元素,並且這個元素是 p 標籤。

:nth-child(n)選擇父元素中的第 n 個子元素,並且第 n 個元素是指定型別的標籤。

p:nth-child(2)選擇父元素中的第 2 個子元素,並且第 2 個元素 p 標籤。注意:是第 2 個子元素並且是 p 標籤,而不是第 2 個 p 標籤

:nth-last-child(n)選擇父元素中的倒數第 n 個子元素,並且倒數第 n 個元素是指定型別的標籤。

p:nth-last-child(2)選擇父元素中的倒數第 2 個子元素,並且倒數第 2 個元素 p 標籤。注意:是倒數第 2 個子元素並且是 p 標籤,而不是倒數第 2 個 p 標籤

:nth-of-type(n)選擇父元素中第 n 次出現的指定型別的子元素

p:nth-of-type(2)選擇父元素中第 2 次出現的 p 標籤。注:父元素中可以有 n 個 p 標籤,但選擇的就是眾多 p 標籤中的第二個,即第二個 p 標籤。

:nth-last-of-type(n)選擇父元素中倒數第 n 次出現的指定型別的子元素

p:nth-last-of-type(2)選擇父元素中倒數第 2 次出現的 p 標籤。注:父元素中可以有 n 個 p 標籤,但選擇的就是眾多 p 標籤中的倒數第二個。即倒數第二個 p 標籤。

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

201809 3 元素選擇器

ccf201809的第三題 題目就不粘上來了!設計思路 首先要用乙個結構體來儲存每一行文件,有等級 標籤以及id。其次需要注意的是標籤不區分大小寫!對於選擇器,大致可以分為兩種,第一種是只有單個的標籤或者id,這種直接遍歷文件即可 也就是我們處理過後的結點陣列 第二種是分層的,這種我們需要從選擇器的...

201809 3 元素選擇器

模擬題,細心細心再細心,整個結構是乙個樹型的結構。include include include include include includeusing namespace std typedef long long ll const int inf 0x3f3f3f3f const double...