以下為本站文章分類清單

  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> 標籤,一樣顯示青色文字。

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

 

以下為文章回應區

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

manicure   2017/5/4 上午 04:18:00

Sweet blog! I found it while surfing around on Yahoo News.
Do you have any suggestions on how to get listed in Yahoo News?
I've been trying for a while but I never seem to get there!

Cheers

manicure   2017/4/11 下午 06:18:00

I loved as much as you will receive carried out right here.

The sketch is attractive, your authored material stylish.
nonetheless, you command get got an edginess over that you wish be delivering the following.
unwell unquestionably come further formerly again since exactly the same nearly very often inside case you shield this increase.

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