Question

我目前正在测试我的CSS技能。我遇到了这个难题，我需要找出如何使用选择器在页面上选择单个图像。这是html代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <style>
    @keyframes spin{
      from{transform:rotate(0deg)}
      to{transform:rotate(360deg)}
    }

    /*CSS Selector goes here*/{
      animation-name: spin;
      animation-duration:1000ms;
      animation-iteration-count:infinite;
    }
  </style>
  <body>
    <header>My Tutorial 3</header>
    <img src="H:\ASECOND YEAR\Web Tutorial 3\harley.jpg" />

    <article>
      <header>About this tutorial</header>
      In this tutorial I need to make a picture spin for ever...
      <img src="H:\ASECOND YEAR\Web Tutorial 3\hellcat.jpg" />
    </article>

    <footer>my footer
      <img src="H:\ASECOND YEAR\Web Tutorial 3\smiley.jpg" /></footer>   
  </body>
</html>

我发现我可以通过编写article img来选择嵌套在文章中的图像，但我发现很难选择其他图像。我已经尝试使用header~img认为它会选择第一张图片，因为第一张图片前面有一个header标签，但它最终会旋转第一张和第二张图片。我也试过img:nth-of-type(2)认为它会选择最后一个图像（索引从0开始）但它没有选择任何图像。有人可以告诉我用于选择每个单独图像的选择器吗？选择器非常繁琐。

我还发现了如何选择最后一张图片，我可以使用footer img来完成此操作，但是当我使用img:last-child时，它会旋转中间和最后一张图像。

Answer 1

首先让我们看看您尝试过的选择器，并且没有按照您的期望工作：

header ~ img - ~选择器被称为通用兄弟选择器，并选择所有img标签，其前面有header作为兄弟。第一张图像和第二张图像在同一父图像下都有一个header，因此都被选中。
img:nth-of-type(2) - nth-*选择器始终只在共享同一父级的元素中起作用。第二个和第三个img标记位于不同的父级内（分别为article和footer）。因此，最顶层的父级只有一个img元素（在header之后出现的元素），因此没有元素与nth-of-type(2)选择器匹配。
img:last-child - last-child选择器选择img，它也是每个父母的最后一个孩子。第一个img不是其父级（body）下的最后一个子级，因为它之后有一些元素，因此它不会被选中。第二个和第三个img代码分别是article和footer下的最后一个子元素，因此都会被选中。

现在讨论如何选择每个单独的图像，有多种不同的方法可以选择它们，当标记变得更复杂时，事情可能会发生变化但是现在看来，以下情况会起作用：

img可以单独选择body > header + img。
可以img或article > header + img选择仅article img秒。
可以img或footer > img单独选择第三footer img。

前两个选择器的关键部分是header + img之前的部分，因为它缩小了所选项目的列表。第一个选择器仅选择紧跟img后的header个标签，并且两者都有body作为其父级（不是祖父母/祖先）。同样，第二个选择器仅选择紧跟img后的header个标记，并且两者都有article作为其共同父级。

在下面的代码段中，我使用了上面提到的选择器，并为每个img元素添加了不同颜色的边框，以说明它们的工作原理。

＆＃13;

body > header + img {
  border: 2px solid red;
}
article > header + img {
  border: 2px solid green;
}
footer > img {
  border: 2px solid blue;
}

＆＃13;

<header>My Tutorial 3</header>
<img src="http://lorempixel.com/100/100/nature/1" />

<article>
  <header>About this tutorial</header>
  In this tutorial I need to make a picture spin for ever...
  <img src="http://lorempixel.com/100/100/nature/2" />
</article>

<footer>my footer
  <img src="http://lorempixel.com/100/100/nature/3" />
</footer>

＆＃13;

使用CSS中的选择器来定位单个元素

1 个答案: