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

debugcn 发表于 Dev

塔里克·乔汉（Tarikh Chouhan）

我目前正在测试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，它将旋转中间和最后一张图像。

哈利

首先，让我们根据您的期望来查看您尝试过但无法使用的选择器：

header ~ img-~选择器称为通用同级选择器，并选择之前具有同级的所有img标签header。第一图像和第二图像header在同一父对象下都具有优先级，因此都被选中。
img:nth-of-type(2)-nth-*选择器始终仅在共享同一父级的元素之间起作用。第二和第三img标签位于不同的父（article和footer分别）内。因此，最顶层的父项只有一个img元素（在first之后的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紧随aheader且都body以其为父（不是祖父母/祖先）的标签。同样，第二个选择器仅选择img紧接在aheader且都具有article作为其公共父对象的标签。

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

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

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-15

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章