---
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>