Question

我正在尝试定位下面的html代码中的所有图片代码：

<ul id = "test">
    <li><a href="#"><img src="img/example1.jpg">EXAMPLE TEXT 1</a></li>
    <li><a href="#"><img src="img/example2.jpg">EXAMPLE TEXT 2</a></li>
    <li><a href="#"><img src="img/example3.jpg">EXAMPLE TEXT 3</a></li>
</ul>

我的CSS定位测试列表中的所有图像：

#test li a > img{
    margin-right: 10px;
}

编辑：#nav li a img {}也没有影响图像元素。如果我给每个img一个类，那么我可以使css正常工作，但我应该能够在不使用图像上的类的情况下进行定位

我如何错误地使用子选择器？

答案：没关系，我上面的原始CSS确实有用。我的代码有一个看不见的字符弄乱了一切。

Answer 1

您似乎没有正确关闭标签请找到更新的代码

<强> DEMO

<强> HTML

<ul id="test">
    <li><a href="#"><img src="img/example1.jpg" />EXAMPLE TEXT 1</a></li>
    <li><a href="#"><img src="img/example2.jpg" />EXAMPLE TEXT 2</a></li>
    <li><a href="#"><img src="img/example3.jpg" />EXAMPLE TEXT 3</a></li>
</ul>

<强> CSS

#test li a img {
    /*css code*/
    border:1px solid red;
}

Answer 2

正如你在this上看到的那样，它应该适用于这个css：

ul#test>li>a>img{
   margin-right: 10px;
}

Answer 3

这会照亮li中的图像 http://jsfiddle.net/UkmR3/1/

#test li a  img{
    margin-right:  100px;
}

Answer 4

#test {
  position:relative;
}
#test li{
  list-style: none;
  padding:5px 15px;
}
#test li img{
  float:left;
  margin-right:15px;
}

定位列表中的所有子图像

4 个答案: