Question

好的，我有这样的代码：

<div id="header"> (yeah, have to use div instead of header tag, don't ask me why)
     <a href="link"><img src="image1.png" alt="image1" /></a>
     <a href="link"><img src="image2.png" alt="image2" /></a>
     <a href="link"><img src="image3.png" alt="image3" /></a>
</div>

我想选择div之后的第一个图像（第一个链接图像）和css中的两个最后一个链接。

我知道我可以通过n-child或第一个/最后一个孩子选择器来做到这一点。但我想用“+”和“〜”。但它们似乎不起作用！

例如：

#header + a {
     border: solid 1px red;
}

给予边界......没什么！

这个似乎也不起作用：

#header a + img {
     border: solid 1px red;
}

怎么了？

与“〜”相同的效果。在所有主流浏览器中测试....

Answer 1

你错了。您正在寻找的选择器是

#header > a:first-child

这将选择#header的直接后果的第一个锚点。 >是直接的死亡选择器，而:first-child则是......第一个孩子。要获得图像，您需要

#header > a:first-child > img

IE6不支持直接选择器。如果没有您不想选择的非直接死亡，您可以选择不使用它，例如您拥有的结构，除了您要选择的结构之外没有任何其他锚点。

+是相邻的兄弟选择器：http://meyerweb.com/eric/articles/webrev/200007a.html。以下HTML结构是您的选择器工作所需的结构：

<div id="header"></div>
<a href="#"><img src="somewhere" alt="" /></a> <-- Selects this one for #header + a
<a href="#"><img src="somewhere" alt="" /></a>
<a href="#"><img src="somewhere" alt="" /></a>

新的CSS3选择器对我不起作用？

1 个答案: