:current

:current 是一个 CSS 伪选择器，它匹配当前显示的元素或元素的祖先元素。因此，我们可以匹配已渲染到屏幕上的项目，如下所示

:current(p, ul);

…这将选择所有当前显示的段落和无序列表。从某种意义上说，它很像 is()。但是，使这个伪选择器超级酷的是它是 CSS 选择器级别 4 规范中称为 “时间维度”伪类 的一部分，这些伪类旨在沿着时间轴匹配元素，例如视频中的字幕。

了解 WebVTT

这就是用于在视频中渲染字幕的方式。它通过定义一个时间轴将字幕与时间范围配对，以便它们与正在播放的语音对齐。

WEBVTT

00:00:00.000 --> 00:00:03.000
- [Birds chirping]
- It's a beautiful day!

00:00:04.000 --> 00:00:07.000
- [Creek trickling]
- It is indeed!

00:00:08.000 --> 00:00:10.000
- Hello there!

当视频播放时，WebVTT 与其一起运行，显示在时间范围内定义的字幕。这意味着存在一个时间维度，其中字幕具有过去、当前和未来状态。字幕播放完成后，它就成为过去的一部分。即将出现的字幕？是的，它们在未来。

Khari McMillian 发布了一篇关于 WebVTT 的 非常全面的文章，包括如何对其进行格式化以获得最佳可访问性。

但我们关心的是那些当前正在播放的字幕。这就是 :current 选择的内容。这里值得注意的是，没有时间轴的 WebVTT 文件无法通过这些时间维度伪类进行样式设置。

:current 选择当前显示的字幕

没错，就这么简单。我们可能希望增强正在显示的字幕的样式，使其在过去和未来的字幕中脱颖而出。

video:current {
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-weight: 800;
  padding: 1rem;
}

示例

在 HTML 中给出某种 <video>

<video controls>
  <source src="/awesome-video.mp4" type="video/mp4"/>
  <track id="caption-track" kind="subtitles" srclang="en" label="English" default/>
</video>

…以及一个沿时间轴定义字幕的 WebVTT 文件

WEBVTT

1
00:00:00.000 --> 00:00:03.000
<i>This is a WebVTT demo.</i>

2
00:00:03.000 --> 00:00:06.000
<b>WebVTT supports many different kinds of formatting.</b>

3
00:00:06.000 --> 00:00:09.000
The text can be normal, like this.

4
00:00:09.000 --> 00:00:12.000 vertical:lr
Or vertical.

5
00:00:12.000 --> 00:00:15.000 line:100%
You can move it vertically.

6
00:00:15.000 --> 00:00:18.000 vertical:rl line:0
Or horizontally.

7
00:00:18.000 --> 00:00:21.000
You can even colorize captions.

8
00:00:21.000 --> 00:00:24.000 size:20
Or change its size.

9
00:00:24.000 --> 00:00:27.000
<ruby>Ruby text is supported as well.<rt>This text will be above the other text.

10
00:00:27.000 --> 00:00:30.000 size:40%
Size can be adjusted as well.

…我们可以设置当前显示的字幕段落的样式

video:current(p) {
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-weight: 800;
  padding: 1rem;
}

浏览器支持

目前，这一切都非常概念化。规范本身处于工作草案状态。这意味着 :current 已经定义，但对它的支持非常少，而且我们现在所拥有的内容可能会在它成为推荐候选者之前发生变化。

IE	Edge	Firefox	Chrome	Safari	Opera
否	否	否	否	16.1+	否

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mobile
否	否	否	7	否

更多信息

• CSS 选择器级别 4 规范（工作草案）
• Web 视频文本轨道格式（MDN）
• 使用 WebVTT 改善视频可访问性

相关属性