Question

如何从多个图像中选择图像？

例如我得到了这些图片：

<img src="smiley1.gif">
<img src="smiley2.gif">
<img src="smiley3.gif">
<img src="smiley4.gif" alt="Smiley face">
<img src="smiley5.gif" alt="Smiley face">
<img src="smiley6.gif" alt="Smiley face">

我可以使用：not selector：

选择前3个

img:not([alt])

以为我可以这样选择第二个：

img:not([alt]):nth-child(2)

但它不起作用。我怎样才能选择第二个？

Answer 1

使用img:not([alt]):nth-of-type(2) { background: #ff0000; }

<img src="smiley1.gif">
<img src="smiley2.gif">
<img src="smiley3.gif">
<img src="smiley4.gif" alt="Smiley face">
<img src="smiley5.gif" alt="Smiley face">
<img src="smiley6.gif" alt="Smiley face">

{{1}}

Answer 2

你可以通过辅助兄弟选择器，这是为了防止你想要选择任何东西，无论它是否有alt。

*我放的alt只是检查选择器，所以我会有东西放置背景。

HTML：

  <img src="smiley1.gif" alt="1">
  <img src="smiley2.gif" alt="2">
  <img src="smiley3.gif" alt="3">
  <img src="smiley4.gif" alt="4">
  <img src="smiley5.gif" alt="5">
  <img src="smiley6.gif" alt="6">

CSS：

  img{
     background: red;
 }

 img + img {
     background: yellow;
}

img + img + img{
      background: green;
}

img + img + img + img{
    background: pink;
}

img + img + img + img + img{
    background: blue;
}

img + img + img + img + img + img{
   background: orange;
}

Answer 3

<强> JQuery的

$(document).ready(function() {
    var x = $('img').not('[alt]').eq(1); //selects 2nd element which is does not have "alt"
    x.css('border-color', 'red');
});

的 CSS

img { height: 50px; width: 50px; border: 1px solid black; }

的 HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="smiley1.gif"> <img src="smiley2.gif"> <img src="smiley3.gif"> <img src="smiley4.gif" alt="Smiley face"> <img src="smiley5.gif" alt="Smiley face"> <img src="smiley6.gif" alt="Smiley face">

即使您更改了元素的顺序，它仍然有效。

CSS从多个图像中选择特定图像

3 个答案: