Question

我有一些由CSS动画制作的HTML，nth-child遍历一系列跨度。

/*Body*/
body{
	background-color: #fff;
	font-family: 'Century Gothic', sans-serif;
  font-weight:300;
/*   white-space: pre-wrap; */
}
/*Sentence*/
.sentence{
     color: #222;
     font-size: 20px;
     text-align: left;
}

.orange{
  color: orange !important;
}
   

/*Vertical Flip*/
.verticalFlip{
	display: inline;
	text-indent: 8px;
}
.verticalFlip span{
	animation: vertical 15s linear infinite 0s;
	-ms-animation: vertical 15s linear infinite 0s;
	-webkit-animation: vertical 15s linear infinite 0s;
	color: #000;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.verticalFlip span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.verticalFlip span:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}

.verticalFlip span:nth-child(6){
	animation-delay: 12.5s;
	-ms-animation-delay: 12.5s;
	-webkit-animation-delay: 12.5s;
}

/*Vertical Flip Animation*/
@-moz-keyframes vertical{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: rotateX(180deg); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0;}
}
@-webkit-keyframes vertical{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: rotateX(180deg); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes vertical{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: rotateX(180deg); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

<section class="wrapper">
 
 <h2 class="sentence">
    <div class="verticalFlip">
      <span>1.  Write a Blog post </span>
      <span>2. Click <span class="orange"></span> to open it</span>
      <span>3. ✎ Edit it. </span>
      <span>4. ⇧ Readers upvote best writers</span>
        <span> (✿◠‿◠)  </span>
      <span> ☆</span>
    </div>
  </h2>
  
</section>

我在跨度内嵌套了一个跨度，为一个字符着色为橙色：

Click <span class="orange"></span> to open it</span>

Nth-child一个接一个地触发跨度，但彩色跨度会使时间关闭。我可以看到橙色闪光，但这个角色没有出现在句子中。我可以重新安排第n个孩子的动画，但我正在寻找一个CSS属性，比如'not'，'ignore'，'跳过这个span'或'识别这个span是嵌套的'。

https://codepen.io/Teeke/pen/Mmdboe

Answer 1

在CSS中，可以使用>选择器仅定位元素的direct children。在您的情况下，.verticalFlip span的每个实例都将替换为.verticalFlip > span。见下文：

＆＃13;

/*Body*/
body{
	background-color: #fff;
	font-family: 'Century Gothic', sans-serif;
  font-weight:300;
/*   white-space: pre-wrap; */
}
/*Sentence*/
.sentence{
     color: #222;
     font-size: 20px;
     text-align: left;
}

.orange{
  color: orange !important;
}
/*Wrapper*/
/* .wrapper{
    background-color: #f5f5f5;
    font-family: 'Raleway', sans-serif;
    margin: 100px auto;
    padding: 40px 40px;
    position: relative;
    width: 70%;
} */

/*Vertical Flip*/
.verticalFlip{
	display: inline;
	text-indent: 8px;
}
.verticalFlip > span{
	animation: vertical 15s linear infinite 0s;
	-ms-animation: vertical 15s linear infinite 0s;
	-webkit-animation: vertical 15s linear infinite 0s;
	color: #000;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.verticalFlip > span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.verticalFlip > span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.verticalFlip > span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.verticalFlip > span:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}

.verticalFlip > span:nth-child(6){
	animation-delay: 12.5s;
	-ms-animation-delay: 12.5s;
	-webkit-animation-delay: 12.5s;
}

/*Vertical Flip Animation*/
@-moz-keyframes vertical{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: rotateX(180deg); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0;}
}
@-webkit-keyframes vertical{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: rotateX(180deg); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes vertical{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: rotateX(180deg); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

＆＃13;

<section class="wrapper">
 
 <h2 class="sentence">
    <div class="verticalFlip">
      <span>1.  Write a Blog post </span>
      <span>2. Click <span class="orange"></span> to open it</span>
      <span>3. ✎ Edit it. </span>
      <span>4. ⇧ Readers upvote best writers</span>
        <span> (✿◠‿◠)  </span>
      <span> ☆</span>
    </div>
  </h2>
  
</section>

＆＃13;

Answer 2

而不是<span>，您可以使用<i>代码。

因为你正在嵌套span。嵌套的span也继承了。{1} 来自父母的财产。

HTML：

 <span>2. Click <i class="orange"></i> to open it</span>

CSS：

i.orange {
 font-style: normal;
}

CSS动画无法识别嵌套跨度

2 个答案: