如何在CSS3延迟类定义中应用加号？ [英] How does apply the plus symbol in a CSS3 delay class definition?

问题描述

以下CSS是运行多个动画的部分

您可以提示，或者如果您喜欢翻译 / code>表示和/或？欢迎任何链接到一些文档。

也如何使用这听起来像一个方法来改变类的延迟量，是...但使用它在html中？

  .animated.delay {
 -webkit-animation-delay ：450ms; 
 animation-delay：450ms; 
} 
 .animated.delay + .delay {
 -webkit-animation-delay：700ms; 
 animation-delay：700ms; 
} 
 .animated.delay + .delay + .delay {
 -webkit-animation-delay：1300ms; 
 animation-delay：1300ms; 
} 
 .animated.delay + .delay + .delay + .delay {
 -webkit-animation-delay：900ms; 
 animation-delay：900ms; 
} 
 .animated.delay + .delay + .delay + .delay + .delay {
 -webkit-animation-delay：1150ms; 
 animation-delay：1150ms; 
} 
 .animated.delay + .delay + .delay + .delay + .delay + .delay {
 -webkit-animation-delay：550ms; 
 animation-delay：550ms; 
} 
  

解决方案

p>相邻兄弟组合器由分隔两个简单选择器序列的加号（U + 002B，+）字符组成。由两个序列表示的元素在文档树中共享相同的父元素，并且由第一序列表示的元素紧邻在由第二序列表示的元素之前。

CSS选择器| W3C

例如：

  div + p {background：red;}  

  < div> 
不受影响< / p>< / div>< p>受影响< / p>  

The below CSS is a section which runs a number of animations

Could you hint or if you prefer "translate" what the + means and/or does? Any link to some documentation is welcome.

also how to use this which sounds like a method to change the delay amount with classes , yes... but of to use it in the html ?

.animated.delay {
  -webkit-animation-delay: 450ms;
  animation-delay: 450ms;
}
.animated.delay+.delay {
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}
.animated.delay+.delay+.delay {
  -webkit-animation-delay: 1300ms;
  animation-delay: 1300ms;
}
.animated.delay+.delay+.delay+.delay {
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}
.animated.delay+.delay+.delay+.delay+.delay {
  -webkit-animation-delay: 1150ms;
  animation-delay: 1150ms;
}
.animated.delay+.delay+.delay+.delay+.delay+.delay {
  -webkit-animation-delay: 550ms;
  animation-delay: 550ms;
}

解决方案

It finds all the elements placed after the first element.

Adjacent sibling combinator

The adjacent sibling combinator is made of the "plus sign" (U+002B, +) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one.

CSS Selectors | W3C

As an example:

div + p {
  background: red;
}

<div>
  <p>Not Affected</p>
</div>
<p>Affected</p>

这篇关于如何在CSS3延迟类定义中应用加号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！