为什么当属性值更改时，我的css属性选择器不刷新

Question

背景:这是一个react web应用程序，我使用的是使用import语句加载的传统css。我在属性选项卡索引上使用css选择器；这是用于滑块的。

问题:当滑块将视图更改为新的可见元素时，它还会将制表符索引调整为零，而其余的“卡片”设置为制表符索引-1。选择器在前3个可见的项目上工作得很好，但是一旦属性改变，它就不会被重新应用。

下面是我的选择器：

ul li[tabindex="0"]:first-of-type {
    background-color: #002e55;
}

ul li[tabindex="0"]:first-of-type + li {
    background-color: green;
}

ul li[tabindex="0"]:first-of-type + li + li {
    background-color: red;
}

html非常简单，如下所示：

​

如果有帮助，我使用来自express-labs的pure-react-carousel作为转盘。

有什么想法？

Answer 1

我能够通过以下方式解决这个问题：

ul li[tabindex="0"] {
    transform: scale(0.95);
    transform: translateY(10px);
}
ul li[tabindex="0"] + li {
    transform: scale(1);
}
ul li[tabindex="0"] + li + li {
    transform: scale(0.95);
    transform: translateY(10px);
}

我仍然希望看到为什么会发生这种情况的解释。