如何防止此子元素继承悬停css？

我正在自定义video.js，并在LoadProgressBar中添加了一个子元素以显示注释。 相关输出的HTML如下所示：

<div class="vjs-progress-control vjs-control">
    <div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Bar" aria-valuetext="0:00 of 0:30">
        <div class="vjs-load-progress" style="width: 100%;">
             <div class="vjs-fs-note vjs-control vjs-button" tabindex="0" role="button" aria-disabled="false" style="margin-left:49%">
                 <span aria-hidden="true" class="vjs-icon-placeholder"></span>
                 <span class="vjs-control-text" aria-live="polite"></span>
                 <div class="vjs-fs-note-text-container-above">        
                    <span>Adding a test note</span>
                 </div>
             </div>

.vjs matrix是我的自定义css文件，这是自定义video.js的推荐方法

问题是默认的video js有一个样式定义，它增加了悬停时进度控件的大小：

// This increases the size of the progress holder so there is an increased
// hit area for clicks/touches.
.video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.666666666666666666em;
}

这最终会增加我在上面添加的子元素的大小。vjs fs note文本容器

如何阻止样式应用于悬停时的注释

我尝试了以下方法：

.vjs-matrix.video-js .vjs-progress-holder .vjs-load-progress div.vjs-fs-note > div.vjs-fs-note-text-container-above:hover { font-size:1em !important; }

然而，这并没有改变任何事情

更新：

1em和1rem都不起作用。。我试过了！同样重要的关键词

我想我的问题是什么应该是选择器，以便我能够覆盖悬停的规则

我还尝试：

.vjs-matrix.video-js .vjs-progress-holder:hover .vjs-load-progress div.vjs-fs-note > div.vjs-fs-note-text-container-above { font-size:1em/rem !important; }

---

对于大多数浏览器和HTML元素，默认情况下，

font size

值设置为

inherit

。这意味着所有子元素

font-size

值都将由其父元素继承，然后向下级联。如果不希望它级联，则需要设置子元素的

字体大小

如果您的子元素是
.vjs fs note text container，则将
字体大小设置为
1rem
或
px
（或任何您想要的）将解决此问题。
我建议您尝试使用
rem
单元解决此问题

em
是一个相对单位。。。（改为：百分比）。它相对于继承的值（从父级读取）

因此，它可能最终成为所有父母的累积百分比

此外，将
1em
设置为继承了某个父元素百分比的元素也不会起任何作用。这就像说“我想要100%的字体大小”

而
rem
是相对于“根”值的单位

看下面


div{
边框：1px纯黑；
利润率：20px；
}
p{
保证金：0；
}
#祖父母{
字号：2em；
}
#母公司{
字号：2em；
}
#要素1{
字体大小：1rem；/*请注意该字体的效果*/
}
#元素2{
字体大小：1em；/*与该字体相比*/
}
文本

正文

正文

正文

正文

以像素为单位指定字体大小修复了该问题。我尝试了em和rem装置，但问题依然存在

.vjs-matrix .vjs-progress-control:hover .vjs-progress-holder .vjs-load-progress div.vjs-fs-note > div.vjs-fs-note-text-container-above {
   font-size: 10px;
}

试试
字体大小：1rem！重要的
其中，
em
是继承字体大小的百分比，
rem
是“根”字体大小的百分比。
.vjs-matrix .vjs-progress-control:hover .vjs-progress-holder .vjs-load-progress div.vjs-fs-note > div.vjs-fs-note-text-container-above {
   font-size: 10px;
}