Question

我有这个CSS代码：

span.input:last-child {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    49% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 0.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    49% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 0.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    49% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 0.0; }
}

我有这个HTML代码：

<div class="tc">Some More Text</div>
<br>
<div class="content">
    Hello<br>
    <span class="input">_</span><br>
    <span class="input">_</span><br>
</div>

问题是，最后span.input根本没有动画效果。如何仅使用CSS使其工作？

Answer 1

因为.content div的最后一个子元素是<br>元素。 :last-child与<span>不匹配。

element:last-child伪类代表其父{匹配element的最后一个孩子。

您可以使用:last-of-type伪类来选择最后一个<span>元素，如下所示：

span.input:last-of-type {
    /* styles goes here... */
}

<强> WORKING DEMO

然而注意，:last-of-type和:last-child伪类都不尊重.input类名称，它们直接查看子树父母的>不是element.class的列表。

来自 MDN ：

:last-of-type CSS伪类代表最后兄弟在其父元素的子元素列表中的类型。

值得注意的是:last-of-type伪班is supported in IE9+。

或者在此特定实例中，您可以使用general sibling selector ~ （IE7+支持）来选择第二个span.input元素如下：

span.input ~ span.input {
    /* styles goes here... */
}

<强> UPDATED DEMO

CSS选择最后一个跨度元素

1 个答案: