1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
---
title: '::cue (:cue)'
slug: 'Web/CSS/::cue'
tags:
- '::cue'
- WebVTT
- cue
translation_of: 'Web/CSS/::cue'
---
<div>{{CSSRef}}</div>
<p>:: cue CSS<a href="/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a>匹配所选元素中的<a href="en-US/docs/Web/API/WebVTT_API">WebVTT</a>提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。</p>
<p>只有CSS一小部分属性可以与<code> :: cue 伪元素一起使用：</code></p>
<ul>
<li><code>{{cssxref("color")}}</code></li>
<li><code>{{cssxref("opacity")}}</code></li>
<li><code>{{cssxref("visibility")}}</code></li>
<li><code>{{cssxref("text-decoration")}} and its longhand properties: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}</code></li>
<li><code>{{cssxref("text-shadow")}}</code></li>
<li><code>{{cssxref("background")}} and its longhand properties: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}}, and {{cssxref("background-blend-mode")}}</code></li>
<li><code>{{cssxref("outline")}} and its longhand properties: {{cssxref("outline-color")}}, {{cssxref("outline-style")}}, {{cssxref("outline-width")}}</code></li>
<li><code>{{Cssxref("font")}} and its longhand properties: {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}}, and {{Cssxref("font-family")}}</code></li>
<li><code>{{cssxref("line-height")}}</code></li>
<li><code>{{cssxref("white-space")}}</code></li>
<li><code>{{cssxref("text-combine-upright")}}</code></li>
<li><code>{{cssxref("ruby-position")}}</code></li>
</ul>
<p><code>属性应用于整个提示集，就像它们是单个单元一样。唯一的例外是<code>背景及其简写属性可以单独应用于每个提示，以避免创建框并遮盖意外大面积的媒体。 </code></code></p>
<h2 id="语法"><code><code>语法</code></code></h2>
<pre class="syntaxbox"><code><code>
{{csssyntax}}</code></code></pre>
<h2 id="示例"><code><code>示例</code></code></h2>
<p><code><code>以下CSS设置提示样式，使文本为白色，背景为半透明黑盒。</code></code></p>
<pre class="brush: css"><code><code>
::cue {
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
}</code></code></pre>
<h2 id="规范"><code><code>规范</code></code></h2>
<table class="standard-table">
<tbody>
<tr>
<th><code><code>规范</code></code></th>
<th><code><code>状态</code></code></th>
<th><code><code>注解 </code></code></th>
</tr>
<tr>
<td><code><code>{{SpecName("WebVTT")}}</code></code></td>
<td><code><code>{{Spec2("WebVTT")}}</code></code></td>
<td><code><code>Initial definition</code></code></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性"><code><code>浏览器兼容性</code></code></h2>
<p><code><code>{{Compat("css.selectors.cue")}}</code></code></p>
<h2 id="参考"><code><code>参考</code></code></h2>
<ul>
<li><code><code><a href="/en-US/docs/Web/API/WebVTT_API">网络视频轨道格式（WebVTT</a></code></code></li>
</ul>
|
