为什么这些CSS伪选择器打破了Chrome Dev Tools？

Question

经过一段时间的努力后，我发现以下几行CSS阻止了Chrome Dev Tools实时编辑CSS。

@media (max-width: 767px) {
 .projects-* .v-center.row {
    display: block;
    width: auto;
  }
  .projects-* .v-center.row > * {
    display: block;
    vertical-align: baseline;
  }
}

在这些行之后编写的任何CSS都会在Chrome开发工具检查器中显示为：

 styles.css:1

并且无法进行调试。

这个CSS有什么特别的不正确或者这只是Chrome中的一个错误吗？

Answer 1

他们并没有“破坏”Chrome开发工具;它忽略了它们，因为它不知道如何处理这些无效的选择器。而不是.projects-*，您需要执行类似

的操作

*[class*='projects']

任何CSS linter都会指出这一点。

我认为devtools然后决定整个文件是固定的，因此它不希望让你实时编辑剩余的规则。