有两个":has"选择器，但其中只有一个处于活动状态

Question

如何激活两个:has选择器？如果我注释掉[1]，那么[2]就可以了。但是，如果我按原样取消注释[1]，则[2]不起作用。我已经在Chrome-106上测试过了。

.arrow {
background-color: red;
}
#container:has(.to-mode-y:hover) .arrow:first-child {
animation: flow_to_y 2s ease-in-out infinite alternate;
}
#container:has(.to-mode-x:hover) .arrow:last-child {
animation: flow_to_x 2s ease-in-out infinite alternate;
}
@keyframes flow_to_y {
0% {
background-position: 0 0;
}
50% {
opacity: 1;
}
100% {
background-position: 0 100%;
}
}
@keyframes flow_to_x {
0% {
background-position: 0 0;
}
50% {
opacity: 1;
}
100% {
background-position: 0 100%;
}
}

<div id="container">
<button class="to-mode-x">Mode X</button>
<div>
<div class="arrow material-icons">keyboard_double_arrow_down</div>
<div class="arrow material-icons">keyboard_double_arrow_up</div>
</div>
<button class="to-mode-y">MODE Y</button>
</div>

CodePen

Answer 1

这是一个106的回归，它刚刚被修复。(https://crbug.com/1368863)该修复将应用于108。谢谢你的报告！