CSS 选择最后一个跨度元素

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

因为.contentdiv的最后一个孩子是一个<br>元素。并且:last-child不匹配<span>.

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

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

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

工作演示。

但是请注意，无论:last-of-type是:last-child伪类还是伪类都不尊重.input类名，它们直接查看父类的子树而不是element.class.

来自MDN：

在:last-of-typeCSS伪类代表最后它的兄弟型号在它的父元素的孩子的名单。

值得注意的是 IE9+ 支持:last-of-type伪类。

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

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

更新的演示。