[問題] CSS擷取第一張圖

看板Web_Design作者 (wei)時間10年前 (2014/06/06 10:51), 10年前編輯推噓3(3推 0噓 14→)
留言17則, 5人參與, 最新討論串1/1
假設我的網頁原始碼是這樣 <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://www.ptt.cc/bbs/Web_Design/M.1402023073.A.5B5.html ※ 編輯: wei76422 (140.96.76.60), 06/06/2014 10:53:12
推
06/06 11:40, , 1F
first-child
06/06 11:40, 1F
→
06/06 11:55, , 2F
first-child 必須是類div元素, 所以你必須從p去指定
06/06 11:55, 2F
→
06/06 11:56, , 3F
但是你的p 是不固定的話就 ...
06/06 11:56, 3F
推
06/06 13:10, , 4F
div>p:first-child {...}
06/06 13:10, 4F
→
06/06 13:11, , 5F
抱歉，沒看清楚，選圖的話應該可以這樣
06/06 13:11, 5F
→
06/06 13:11, , 6F
div p>img:first-child {...}
06/06 13:11, 6F
→
06/06 13:13, , 7F
div>p:nth-child(2) img{...}
06/06 13:13, 7F
→
06/06 13:13, , 8F
方法有很多，看要怎麼用而已@@
06/06 13:13, 8F
→
06/06 13:15, , 9F
也應該可以這樣 div img:first-child {...}
06/06 13:15, 9F
→
06/06 13:16, , 10F
以上方法我是沒試過可不可以用啦，要測測看才知道
06/06 13:16, 10F
→
06/06 13:16, , 11F
如果是我我會給類別比較實在，不然IE7看不懂
06/06 13:16, 11F
p:first-child的話就會變成兩張圖都選到，所以不能這樣寫 其實不太懂 > 的意思，有google到說可以利用 > ，但我試過會失敗耶! ※ 編輯: wei76422 (140.96.76.60), 06/06/2014 14:00:16
→
06/06 14:43, , 12F
無解
06/06 14:43, 12F
→
06/06 16:09, , 13F
">" 是用來選子項的，跟 "空格" 類似，只是後者不管
06/06 16:09, 13F
→
06/06 16:10, , 14F
A B 中間相隔多少層，而 A>B 的話 B 必須剛好是 A 的下層
06/06 16:10, 14F
推
06/06 16:13, , 15F
然後 :nth-child 的名字有個 child，它也是選子層的
06/06 16:13, 15F
→
06/06 16:14, , 16F
所以 :first-child 只會考慮 "它是自己上一層的子層的
06/06 16:14, 16F
→
06/06 16:14, , 17F
第一個"，所以即使寫成 div img:first-child 也不行
06/06 16:14, 17F
感謝H大詳細的說明，但這樣看來真的無解了QQ ※ 編輯: wei76422 (140.96.76.60), 06/10/2014 15:00:23
‣ 更多 wei76422 的文章
文章代碼(AID): #1JaIoXMr (Web_Design)