以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

CSS GradientCSS3 last-child vs. last-of-type

2/22 15' icon

Photo by http://www.spreadshirt.com

CSS3強大的虛擬選取器,區分相當仔細,卻也造成使用者誤解,例如 last-child 和last-of-type,同樣型式的,還有first-child/first-of-type、nth-child(n)/nth-of-type(n)、nth-last-child(n)/nth-last-of-type(n)等,這些選取結果,有時相同,有時不同,以下說明:

 

<H2>CSS3</h2>
<div>
	<p>CSS3強大的虛擬選取器,區分相當仔細</p>
	<p>卻也造成使用者誤解</p>
</div>
<p>同樣型式</p>
<ul>
	<li>last-child/last-of-type</li>
	<li>first-child/first-of-type</li>
	<li>nth-child(n)/nth-of-type(n)</li>
	<li>nth-last-child(n)/nth-last-of-type(n)</li>
</ul>
p:last-child{color:blue;}
p:first-child{color:red;}
p:last-of-type{color:green;}
p:first-of-type{color:cyan;}
div p:first-child{color:yellow;background-color:black;}

CSS3

CSS3強大的虛擬選取器,區分相當仔細

卻也造成使用者誤解

同樣型式

  • last-child/last-of-type
  • first-child/first-of-type
  • nth-child(n)/nth-of-type(n)
  • nth-last-child(n)/nth-last-of-type(n)

上例中,使用文字顏色區分選取項,整個文件的第一個標籤(first-child)是<H2>,所以 p:first-child 這個樣式指文件的風一個標籤是<p>,所以不生效。

同理,div p:first-child 是指標籤 <div> 中的第一個標籤,而且是 <p> 設為黑底黃字。

first-of-type 則是指某一種標籤的第一個,p:first-of-type 就是第一個 <p> 標籤,在本例中 <div> 裡的第一個 <p> 標籤,己經被 div p:first-child 的設定覆蓋了,否則一樣是青色,脫離了 <div> 區塊,下一個區段中的第一個 <p> 標籤,一樣顯示青色文字。

為避免有人看不到效果,結果如圖:

 

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: