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

Question

对于分布在不同文件上的大型项目，我有很多麻烦。然后编译器使用相同的css组装所有选择器，并将它们组合在一个css选择器中。看起来很好而且效率很高。但是，在某些情况下，我的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. 从上面选择第一个选择器 - ＆gt; CTRL + C
2. 打人民币 - ＆gt;检查任何页面（例如，此stackoverflow页面）
3. 点击DevTools右上角的小加号图标
4. Ctrl + V，因此粘贴在选择器
中
5. 点击标签：您现在可以添加css属性。
6. 重复上述步骤，但从上方复制第二个选择器而不是第一个。
7. 这次当你点击tab时，你无法开始添加css属性，而是选择器（以及样式规则）就会消失。

Answer 1

它不会消失，但它不是元素的选择器本身，它是元素的选择器州，:hover州。这就是为什么当你放入开发工具时它看起来已经消失了，但事实并非如此;在那里你只需要使用开发工具激活:hover状态，在你要查看规则的元素上。

要对要更改其状态的元素执行right-click，然后选择:hover

OP的评论：

  

如果这是原因，那么两个选择器都会有相同的   结果，因为两者都只包含：悬停相关的选择器。打   tab应该让用户输入应该适用的css   进入选择器。但是，存在所描述的行为。

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

像这样的东西（注意黄色子弹 - 意味着选择了hover状态）：

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