作者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/cn.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