Question

我想创建一个特定的类，在这个例子中＆＃34;包装器＆＃34;在页面加载时将其背景设置为动画。我希望它们显得交错，所以第一个动画，然后是第二个，然后是第二个，第二个是第三个。问题是，这些不是也不可能是兄弟姐妹。因为他们不是兄弟姐妹，所以我认为你不能用nth-of-type来完成这个任务。我可以在我的css中使用任何其他选择器来替换可行的nth-of-type吗？小提琴：https://jsfiddle.net/q2drLsee/1/

CSS

@keyframes animateBackground {
  100% { background-color: red; }
}

body {
  background-color: white;
}

.wrapper {
  animation: animateBackground 1s forwards;
  display: inline-block;
  padding: 0.1em;

  &:nth-of-type(1) {
    animation-delay: 1s;
  }

  &:nth-of-type(2) {
    animation-delay: 2s;
  }

  &:nth-of-type(3) {
    animation-delay: 3s;
  }
}

HTML

<div>
  Some text <span class="wrapper">some more text</span> and text after
</div>

<div>
  Some text <span class="wrapper">some more text</span> and text after
</div>

<span class="wrapper">Some other text</span>

Answer 1

对于仅限CSS的解决方案，我能想到的最好的方法是单独定位每个.wrapper元素。鉴于延迟要求和标记的变化，我没有看到任何解决方法。您必须使用nth-child和/或nth-of-type来定位类似结构化的标记。您还必须确保每个.wrapper元素的顺序/位置。对标记的任何更改都需要您更新CSS，这使得此解决方案非常不灵活，但要求也是如此。更不用说你可能会写一些疯狂的选择器。

Itay Ganor 的jQuery解决方案在灵活性和简单性方面似乎是您最好的选择。

@keyframes animateBackground {
  100% {
    background-color: red;
  }
}

body {
  background-color: white;
}

.wrapper {
  animation: animateBackground 1s forwards;
  display: inline-block;
  padding: 0.1em;
}

div:nth-of-type( 1 ) .wrapper {
  animation-delay: 1s;
}
div:nth-of-type( 2 ) .wrapper {
  animation-delay: 2s;
}

body > span.wrapper:nth-of-type( 1 ) {
  animation-delay: 3s;
}

/* or */
/*
body > span.wrapper:nth-child( 3 ) {
  animation-delay: 3s;
}
*/

<div>
  Some text <span class="wrapper">some more text</span> and text after
</div>

<div>
  Some text <span class="wrapper">some more text</span> and text after
</div>

<span class="wrapper">Some other text</span>

Answer 2

我会使用jQuery或JavaScript，它会让你的生活更轻松。

我在这个例子中使用了jQuery， JSFiddle

var delay = 1;
$(".wrapper").each(function() {
  $(this).css('animation-delay', delay + 's');
  delay++;
});

@keyframes animateBackground {
  100% {
    background-color: red;
  }
}

body {
  background-color: white;
}

.wrapper {
  animation: animateBackground 1s forwards;
  display: inline-block;
  padding: 0.1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  Some text <span class="wrapper">some more text</span> and text after
</div>

<div>
  Some text <span class="wrapper">some more text</span> and text after
</div>

<span class="wrapper">Some other text</span>

Answer 3

如果您的内容允许，您可以添加特定于每个包装器的第二个类：

body {
  background-color: white;
}

.wrapper {
  animation: animateBackground 1s forwards;
  display: inline-block;
  padding: 0.1em;

  &.first {
    animation-delay: 1s;
  }

  &.second {
    animation-delay: 2s;
  }

  &.third {
    animation-delay: 3s;
  }
}

<div>
  Some text <span class="wrapper first">some more text</span> and text after
</div>

<div>
  Some text <span class="wrapper second">some more text</span> and text after
</div>

<span class="wrapper third">Some other text</span>

请参阅fiddle

如何将nth-of-type用于非兄弟元素

3 个答案: