CSS 动画无法识别嵌套 Span

Question

我有一些 HTML，由 CSS 动画，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>

我在一个 span 中嵌套了一个 span 以将一个字符染成橙色：

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

Nth-child 会一一触发跨度，但彩色跨度会引发计时。我可以看到橙色闪烁，但该字符没有出现在句子中。我可以重新定时第 n 个子动画，但我正在寻找一个 CSS 属性，如“not”、“ignore”、“skip this span”或“recognize this span is nested”。

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

Answer 1

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

/*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; }
}

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

Answer 2

你可以使用<i>标签代替<span>。

因为您正在嵌套span。嵌套的span 也继承了 父母的财产。

HTML：

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

CSS：

i.orange {
 font-style: normal;
}