特定场景下修改媒体文件的样式

有时，我们需要修改一些较小粒度的样式，比如audio和video。

audio::-webkit-media-controls-volume-control-container {
    display: none !important;
}

但是为了适用于特定场景，缩小影响范围，一般会对这些元素增加一个父类，比如这里的父类元素的class名称是xxx：

.xxx audio::-webkit-media-controls-volume-control-container {
    display: none !important;
}

但是，这样写不会生效。

那么可以通过js创建style标签，将此样式以字符串的形式写入，下面是一个例子：

 if (业务场景判断) { // 判断条件满足的情况下
      var d = document.createElement('style');
      d.setAttribute('type', 'text/css');
      d.innerHTML = `audio::-webkit-media-controls-volume-control-container {
        display: none !important;
      }`;
      document.getElementsByTagName('head')[0].appendChild(d);
}