Question

我正在尝试兄弟选择图像。有一系列用链接包裹的图像，我想要选择除第一个之外的所有图像。

img {
    max-width: 50px;
}
.content img {
    max-width: 400px;
}
img.a ~ img.a {
    border: 1px #333 solid;
}

<div class="content">
    <a href="/">
        <img class="a b c" src="https://upload.wikimedia.org/wikipedia/commons/6/6d/Astrodon1DB.jpg">
    </a>
    <a href="/">
        <img class="a b c" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Nipponosaurus_dinosaur.png">
    </a>
    <a href="/">
        <img class="a b c" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Macronaria_scrubbed_enh.jpg/800px-Macronaria_scrubbed_enh.jpg">
    </a>
</div>

这是一个小提琴：http://fiddle.jshell.net/efsev59z/

为什么不img.a ~ img.a选择所有带有“a”类图像的“a”的图像？根据我的理解，他们都是共同元素的孩子，.content。怎么了，怎么做到这一点？

Answer 1

要被视为兄弟姐妹，元素需要是同一立即父级的子级（不仅仅是一个共同的祖先，因为所有DOM元素共享body作为祖先（例如）。考虑这样的事情：

a ~ a > img.a {
    /* styles */
}

Answer 2

兄弟选择器仅适用于兄弟姐妹。这些图像中的每一个都有自己的父母。他们是堂兄弟，而不是兄弟姐妹。

Answer 3

另一种方法是将边框应用于所有图像，然后将其覆盖为第一张图像。您可以使用:first-child选择器获取第一个锚点并将图像定位在其中。

img {
    max-width: 50px;
}
.content img {
    max-width: 400px;
}
img.a  {
    border: 1px #333 solid;
}
.content a:first-child img {
    border:none;
}

http://fiddle.jshell.net/efsev59z/4/

用链接包裹的图像上的兄弟选择器

3 个答案: