使用CSS访问<img/>标记

Question

我需要一些CSS帮助。我正在尝试创建一个包含大量<ul>和<li>标记的树。问题是我有许多带有特定类的<li>标签，在该列表中我有一个<img>标签。

如何访问<img>代码并添加不同的背景图片？我很困惑如何将<img>标记指向<li>的类，然后设置背景图像。

注意：不允许使用CSS3

---

<ul>
  <li class="leaf"><img></li>
  <li class="leafhidden"><img></li>
  <li class="leafhidden"><img></li>
</ul>

---

谢谢

Answer 1

此代码将进入.leaf并查找img标记，然后更改图片：

.leaf img:hover {
    content:url('http://rookery.s3.amazonaws.com/941000/941430_96b2_625x1000.jpg');
}

我为你做了一个小提琴：http://jsfiddle.net/3DXD2/

Answer 2

ul li.leaf img {background:url(/images/img.jpg);}    
ul li.leafhidden img {background:url(/images/img2.jpg);}

Answer 3

使用后代组合子。

.leaf img {
    background-image: url('leaf.png');
}

除非图像是半透明的，否则不会显示任何内容。

---

也就是说，看起来您正在尝试使用CSS指定内容图像。不要那样做。使用src属性（并添加适当的alt属性）。

Answer 4

使用background上img的CSS使用CSS的唯一方法如下：

<强> DEMO

.leaf > img {
    background: url(http://placekitten.com/200/200) no-repeat;
    width: 200px;
    height: 200px;
}

由于img和li标记都为空，因此当向其中任何一个声明background时，不会显示任何内容。所以你必须指定宽度和高度。

Answer 5

就这么简单：

ul li img { /*do your styling here*/ }

编辑：

错过了关于课程的观点：

ul li.leaf img { /*do your styling here*/ }