【发布时间】：2021-07-06 18:51:33
【问题描述】：
背景：我正在尝试修复 Chrome 中音频元素外观的两个烦恼，在尝试这样做时，我遇到了两个我想更好地理解的问题。这是关于 MacOS 上的 Chrome 89。我很好地使用伪选择器在音频元素内部设置样式。当使用 dom 检查器查看 shadow dom 内部时，找出伪选择器的名称非常有用。例如，以下两条规则完全符合预期：
::-webkit-media-controls-timeline {background-color:pink;}
audio::-webkit-media-controls-time-remaining-display {background-color:lightgrey;}
问题：但是，有两件事没有按预期工作，我想了解原因。
问题 1： 对剩余显示 div 中的第一个字母进行样式设置不起作用。以下规则无效。
audio::-webkit-media-controls-time-remaining-display:first-letter {color:white;}
这太神奇了，因为浏览器会显示这个
<style>div:first-letter {color:red;}</style> ... <div>e xample</div>
正如预期的那样。为什么我无法设置第一个字母的样式？ （这样做的想法是去掉剩余时间显示中最烦人的前导/符号）。
问题 2：
为什么我不能在 shadow DOM 的不同部分使用不同的伪属性设置元素的样式。更准确地说，以下规则无效：
::-internal-track-segment-highlight-before {background-color: blue;}
我认为颜色样式的工作与上述其他情况没有区别。 （这样做的想法是增加轨道段的两个部分之间过小的对比度。）
补充：我设法提高了对比度使用
audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}
但问题仍然是为什么一种方法有效而另一种方法无效。
【问题讨论】：
标签： html css google-chrome shadow-dom