CSS选择器长度导致错误，原因是什么？

Question

对于分布在不同文件中的大型项目，我有很多 sass。然后编译器将所有具有相同 css 的选择器组合起来，并将它们组合到一个 css-selector 中。看起来很好而且效率很高。但是，在某些情况下，我的 css 无法正常工作，这似乎是由于选择器大小造成的。

我发现以下内容：当我在 Chrome DevTools 中使用“新样式规则”按钮时，我可以添加以下选择器，点击选项卡并插入我的 css：

a.valign-wrapper:hover i.material-icons,
a.progress-bar:hover i.material-icons,
a.status:hover i.material-icons

但是，第二个选择器不起作用。当点击标签时它会消失（没有任何反馈），似乎意味着我不能使用它。

a.valign-wrapper:hover i.material-icons,
a.progress-bar:hover i.material-icons,
a.status:hover i.material-icons,
.select-wrapper.box a.caret:hover::before i.material-icons

这是什么原因？而且，你知道解决这个问题的方法吗？由于我使用的是 sass，我不能只将选择器分成两行，因为 sass 会在编译时将它们组合起来。

更新：

为了澄清问题并表明它是 chrome 和/或 css 的问题，这里有一些重现的步骤（在 Chrome 中）：

1. 从上方选择第一个选择器 -> Ctrl+C
2. 点击 RMB -> 在任何页面上检查（例如这个 stackoverflow-page）
3. 点击 DevTools 右上角的小加号图标
4. Ctrl+V，从而粘贴到选择器中
5. 点击标签：您现在可以添加 css 属性。
6. 重复上述步骤，除了从上面复制第二个选择器而不是第一个。
7. 这一次当您点击选项卡时，您无法开始添加 css 属性，而是选择器（以及样式规则）消失了。

Answer 1

它不会消失，但它不是 element 的选择器，本质上，它是元素 state 的选择器，:hover 状态。这就是为什么当您放入开发工具时，它看起来好像消失了，但实际上并非如此；在那里你只需要使用开发工具激活:hover 状态，在你想查看规则的元素上。

要在要更改其状态的元素上执行 right-click 并选择 :hover

OP 的评论：

如果这是原因，那么两个选择器将具有相同的 结果，因为两者都只包含 :hover 相关的选择器。打 选项卡应该让用户输入应该适用于 输入的选择器。但是，所描述的行为是存在的。

那是因为你最后一个选择器是一个伪元素::before，所以你需要在选择:hover状态后选择它。

类似这样的东西（注意黄色项目符号 - 意思是hover 选中状态）：

如果这不起作用，可能是您的 CSS 选择器与您的 DOM 不匹配。