css - 我想将 css 应用于第一张图片

Question

我尝试了 first-child 但我无法让它工作。

CSS

.post_locked2 img:first-child {

HTML

<div class="post_locked2">
  <h1>title...
  <h2>Subtitle....
  <p>.....
  <p>....
  <img class="aligncenter" src="http://www.what...
  <img title="RockDizFile" src="http://......
  <img title="Bullet" src="http://wwww.......
</div>

如何将 css 仅应用于第一张图片？

Answer 1

:first-child 只选择父元素的第一个子元素。在 OP 示例中，:first-child 将是 h1，因此 img:first-child 实际上不会选择任何内容。

改用nth-of-type(1)。
http://reference.sitepoint.com/css/pseudoclass-nthoftype

<!-- in the head -->
<style>
.post_locked2 img:nth-of-type(1){
  border:5px solid red;
}
</style>

<!-- in the body -->
<div class="post_locked2">
<img class="aligncenter" src="http://www.what...
<img title="RockDizFile" src="http://......
<img title="Bullet" src="http://wwww.......
</div>

这是另一个使用示例:http://jsfiddle.net/FsEhD/