如何防止这个子元素继承hover css？

如何解决如何防止这个子元素继承hover 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>

我已经成功地使用以下 css 规则设置了 vjs-fs-note-text-container-above 的样式：

.vjs-matrix.video-js .vjs-progress-holder .vjs-load-progress div.vjs-fs-note > div.vjs-fs-note-text-container-above {
    background-color: white;
    z-index: 20;
    min-width: 100px;
    width: fit-content;
    border: 1px solid #aaa;
    border-radius: 5px;
    position: relative;
    top:-80px;
    height: fit-content;
    padding: 7px;
    color: black;
}

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

问题是默认视频 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;
}

https://github.com/videojs/video.js/blob/main/src/css/components/_progress.scss#L46

这最终增加了我添加 .vjs-fs-note-text-container-above 的子元素的大小。

如何停止将样式应用到悬停时的笔记？

我尝试了以下方法：

.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 都不起作用.. 我也尝试过使用 !important 关键字。

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

我也试过：

.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 值都将被其父元素继承，然后向下级联。如果您不希望它级联，则需要设置子元素的 font-size。

如果您的子元素是 .vjs-fs-note-text-container-above，将 font-size 设置为 1rem 或 px（或任何您想要的）将解决问题。

我建议您尝试使用 rem 单元来解决您的问题。

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

所以它最终可能是所有父母的累计百分比......

此外，将 1em 设置为继承了某些父元素百分比的元素将无济于事。这就像在说“我希望字体大小是实际大小的 100%”。

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

见下文！

div{
  border: 1px solid black;
  margin: 20px;
}
p{
  margin: 0;
}
#grandparent{
  font-size:2em;
}
#parent{
  font-size:2em;
}
#element1{
  font-size: 1rem; /* Notice the effect of that one */
}
#element2{
  font-size: 1em; /* versus that one */
}

<p>Text</p>
<div id="grandparent">
  <p>Text</p>
  <div id="parent">
    <p>Text</p>
    <div id="element1">
      <p>Text</p>
    </div>
    <div id="element2">
      <p>Text</p>
    </div>
  </div>
</div>

所以...尝试使用 SAME 选择器作为您希望覆盖的选择器 + 添加元素的选择器：

.video-js .vjs-progress-control:hover .vjs-progress-holder .vjs-fs-note-text-container-above{
  font-size: 1rem;
}

这可能也够了……但是您需要在 :hover 之前的选择器部分，因为那是触发器。

.video-js .vjs-progress-control:hover .vjs-fs-note-text-container-above{
  font-size: 1rem;
}

以像素为单位指定字体大小解决了该问题。我尝试了 em 和 rem 单位，但问题仍然存在。

List<Record> records = XElement.Parse(xmlString)
    .Descendants("RECORD")
    .Select(x => new Record((int)x.Element("no"),(int)x.Element("Active")))
    .ToList();


public class Record
{
    public readonly int No;
    public readonly int Active;

    public Record(int no,int active)
    {
        this.No = no;
        this.Active = active;
    }
}