时间维度伪类

这个伪类叫做时间维度伪类，它会在一个时间维度元素中选择当前活跃位置，比如在 HTML 语音渲染期间或者在 HTML5 视频字幕的显示期间。所有这些选择器类似 :matches()，它们也接受一个可选的简单选择器列表作为参数。这 3 个伪类的不同之处是 :past 选择所有 :current 元素的前一个相邻元素，显然 :future 选择所有 :current 元素的下一个相邻元素。

语法

/* 当前 */
:current { /* declarations */ }
:current(s1[, s2, …]) { /* declarations */ }


/* 过去 */
:past { /* declarations */ }
:past(s1[, s2, …]) { /* declarations */ }


/* 未来 */
:future { /* declarations */ }
:future(s1[, s2, …]) { /* declarations */ }

示例

:current(p, span) {
  background-color: yellow;
}

:past(p, span),
:future(p, span) {
  background-color: gray;
}

这些选择器规则表示用黄色背景高亮当前演讲读到的区域，用灰色背景高亮当前元素的上一个以及下一个相邻元素。

浏览器支持情况

http://css4.rocks/selectors-level-4/time-dimensional-pseudo-classes.php

参考资料

许可协议：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
本文链接：https://tanglj.cn/2017/03/13/css4-time-dimensional-pseudo-class/