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

Question

背景：这是一个反应网络应用程序，我正在使用使用 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 作为轮播。

想法？

标签： cssreactjs

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);
}

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