Question

这是第一次发帖提问，所以我希望我这样做。我想做的是，我的最后一个孩子在我的包装div中没有向右边缘。

＆＃13;

.wrapper img,
video {
  width: 18%;
  margin-right: 2.5%;
}

.wrapper img,
video:last-child {
  margin-right: 0;
}

＆＃13;

<div class="wrapper">
  <img src="cat.jpg">
  <video>
    <source src="cats.mp4">
    </video>
  <img src="morecats.jpg">
  <video>
    <source src="meow.mp4">
    </video>
  <img src="garfield.jpg">
</div>

＆＃13;

这里的问题是，div中的每个img标签现在都有margin-right：0; 。我希望有人理解我的问题，并能帮助我。

注意：我不允许使用HTML和＆amp ;;之外的语言。 CSS。

Answer 1

您还需要将：last-child添加到img中。

.wrapper img:last-child, .wrapper video:last-child{
    margin-right:0;
}

Answer 2

要从div中的最后一个子项删除margin-right: 0;，您可以执行以下操作：

.wrapper img:not(:last-child),
    video:last-child {
      margin-right: 0;
    }

＆＃13;

.wrapper img,
video {
  width: 18%;
  margin-right: 2.5%;
}

.wrapper img:not(:last-child),
video:last-child {
  margin-right: 0;
}

＆＃13;

<div class="wrapper">
  <img src="cat.jpg">
  <video>
    <source src="cats.mp4">
    </video>
  <img src="morecats.jpg">
  <video>
    <source src="meow.mp4">
    </video>
  <img src="garfield.jpg">
</div>

＆＃13;

：last-child影响所有img标签

2 个答案: