我想将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/