作者wei76422 (wei)
看板Web_Design
標題[問題] CSS擷取第一張圖
時間Fri Jun 6 10:51:11 2014
假設我的網頁原始碼是這樣
<div>
<p>ABC</p>
<p><img......></p>
<p>DEF</p>
<p><img......></p>
</div>
CSS該怎麼定義才能取到第一張圖呢?
第一張圖不一樣是在第二行的位置，也續第一也許第三不固定
試過nth-child與nth-of-type都無法，主要卡在前面還有個p
求css解，目前不考慮js其他方法
麻煩各位高手了，謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.96.76.60
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1402023073.A.5B5.html
※ 編輯: wei76422 (140.96.76.60), 06/06/2014 10:53:12
1F：推 wayway2004:first-child 06/06 11:40
2F：→ lyforever:first-child 必須是類div元素, 所以你必須從p去指定 06/06 11:55
3F：→ lyforever:但是你的p 是不固定的話就 ... 06/06 11:56
4F：推 leochen0818:div>p:first-child {...} 06/06 13:10
5F：→ leochen0818:抱歉，沒看清楚，選圖的話應該可以這樣 06/06 13:11
6F：→ leochen0818:div p>img:first-child {...} 06/06 13:11
7F：→ leochen0818:div>p:nth-child(2) img{...} 06/06 13:13
8F：→ leochen0818:方法有很多，看要怎麼用而已@@ 06/06 13:13
9F：→ leochen0818:也應該可以這樣 div img:first-child {...} 06/06 13:15
10F：→ leochen0818:以上方法我是沒試過可不可以用啦，要測測看才知道 06/06 13:16
11F：→ leochen0818:如果是我我會給類別比較實在，不然IE7看不懂 06/06 13:16
p:first-child的話就會變成兩張圖都選到，所以不能這樣寫
其實不太懂 > 的意思，有google到說可以利用 > ，但我試過會失敗耶!
※ 編輯: wei76422 (140.96.76.60), 06/06/2014 14:00:16
12F：→ superpai:無解 06/06 14:43
13F：→ hit1205:">" 是用來選子項的，跟 "空格" 類似，只是後者不管 06/06 16:09
14F：→ hit1205:A B 中間相隔多少層，而 A>B 的話 B 必須剛好是 A 的下層 06/06 16:10
15F：推 hit1205:然後 :nth-child 的名字有個 child，它也是選子層的 06/06 16:13
16F：→ hit1205:所以 :first-child 只會考慮 "它是自己上一層的子層的 06/06 16:14
17F：→ hit1205:第一個"，所以即使寫成 div img:first-child 也不行 06/06 16:14
感謝H大詳細的說明，但這樣看來真的無解了QQ
※ 編輯: wei76422 (140.96.76.60), 06/10/2014 15:00:23