.video-js .vjs-dock-text {
background: linear-gradient(45deg, rgba(0,0,255,.8) 35%, transparent);
height: 80%;
在此示例中，以45度的下坡角度應用了.8 alpha的藍色漸變。線性漸變中設置的顏色/ alpha將在漸變開始褪色之前用於漸變的前35％。同樣，使用了元素高度的80％。
以下CodePen允許您嘗試使用值。啟動視頻，然後將鼠標移入和移出以查看默認使用的細微漸變。
看筆
懸停漸變Luna皮膚
通過Brightcove學習服務（
@bcls
） 上
密碼筆
。
字幕列表項
如果要設置樣式/控製字幕菜單中列表項的樣式，請在此處顯示選擇器：
您可以使用選擇器為所有項目設置樣式：
.vjs-subs-caps-button .vjs-menu .vjs-menu-content .vjs-menu-item.
CSS 特殊性
CSS 特異性是指瀏覽器確定哪些屬性值根據其相關性應用於元素的方式。如需有關此概念的詳細資訊，請檢閱
特殊性
文章。
在 Chrome 中，檢查大型播放按鈕。請注意，該
background
屬性是使用多個類別設定的。這意味著我們不能只使用一個
.vjs-big-play-button
類來覆蓋此屬性。
以下是自訂大型播放按鈕的三種方法：
參照分配給玩家的 ID。
使用多個類別來提高屬性的相關性。
使用 JavaScript 在播放器上設置 ID 屬性，然後在 CSS 中引用它。
引用一個 ID
由於
id
屬性與 CSS 特異性有很高的相關性，因此在 CSS 選擇器中
id
添加一個將覆蓋該
background-color
屬性。
如果您尚未這樣做，請將
id
屬性添加到
video
元素，如下所示：
<video-js id="video_1"
data-account="1752604059001"
data-player="68f30408-8fb4-431d-accb-8c5baa8c4790"
data-embed="default"
controls=""></video-js>
在 CSS 中，將 id 值添加到
.vjs-big-play-button
類選擇器。取代背景顏色和不透明度，如下所示：
<style>
#video_1 .vjs-big-play-button {
background-color: #B37D5B;
opacity: .6;
.video-js {
width: 640px;
height: 360px;
</style>
你應該看到大的播放按鈕現在是橙色的。
使用多個類別
自從
background
大播放按鈕的屬性是使用兩個類設置的，因此CSS選擇器中至少需要兩個類才能覆蓋此屬性。
將類添加到
.video-js
.vjs-big-play-button
類選擇器中。請記住，該
.video-js
類是在視頻容器上設置的。
使用這些值，就是說選擇所有類名稱為
vjs-big-play-button
類名稱為的元素的後代
.video-js
。
<style>
.video-js .vjs-big-play-button {
background-color: #B37D5B;
opacity: .6;
.video-js {
width: 640px;
height: 360px;
</style>
你應該看到大的播放按鈕現在是橙色的。使用多個類可能非常棘手，可能會影響多個元素，而 id 是特定於一個元素。
您也可以使用 JavaScript 動態添加一個 ID 到大型播放按鈕。然後你可以從 CSS 引用該 ID。
添加代碼以添加一個 ID 到大播放按鈕元素。
第 173 行：獲取對具有類的第一個元素的引用
vjs-big-play-button
。
第 174 號線：添加一個
id
屬性到大播放按鈕。
<script type="text/JavaScript">
var playButton = document.getElementsByClassName("vjs-big-play-button")[0];
playButton.setAttribute("id", "myPlayButton");
</script>
在 CSS 中，將選擇器更改為使用
myPlayButton
ID 名稱。
<style>
#myPlayButton {
background-color: #B37D5B;
opacity: .6;
.video-js {
width: 640px;
height: 360px;
</style>
你應該看到大的播放按鈕現在是橙色的。
組件選擇器
這些屏幕截圖和下表顯示了組件以及操作該組件所需的CSS選擇器。有關組件本身的更多信息，請參見
組件概述
doc。
在播放器加載和懸停時
組件選擇器摘要
質量選擇器
.vjs-quality-menu-wrapper.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-menu-button-use-resolution
全螢幕切換
.video-js .vjs-fullscreen-control.vjs-control
.vjs-dock-text
（由DockTitle和DockDescription繼承）
.vjs-dock-title
.vjs-dock-description
如果您要查找的選擇器不在表格中，請通過電子郵件與我們聯繫
知識團隊
我們會把它放到桌子上。
{PLAYER_CLASS}
的
{PLAYER_CLASS}
是一個選擇器，將被播放器的實際特定於類的選擇器替換，例如：
.bc-player-oH9IdGudo_default
{PLAYER_CLASS}
幫助您使CSS足夠具體，以覆蓋內置樣式，而不必為每個播放器分別設置CSS或使用類似的方法：
.video-js.video-js
例如，假設您要覆蓋加載微調器，則可以使用：
.video-js.video-js .vjs-loading-spinner {...}
這足以覆蓋默認值，但是如果您恰巧在頁面上還有第二個播放器。使用以下內容不會影響頁面中的任何其他播放器：
.video-js{PLAYER_CLASS} .vjs-loading-spinner {...}
請注意
{PLAYER_CLASS}
選擇器只能在添加到播放器配置樣式表數組（例如，通過Studio或播放器管理API）並直接內置到播放器中的CSS文件中使用。此選擇器不適用於通過單獨包含的高級實現代碼CSS
<style></style>
要么
<link></link>
標籤。
