这些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 Dev Tools 检查器中：

 styles.css:1

而且无法进行调试。

这个CSS有什么特别不正确的地方吗？还是这只是Chrome的一个Bug？

- chrisphilton

---

很不可能是Chrome的一个bug。也许是紧接着这些代码的那一行出了问题？ - SeinopSys

删除这些行之后，一切似乎都正常了，此后的CSS语法也相当简单明了。 - chrisphilton

".projects-*" 是一个有效的 CSS 选择器吗？ - Ethan Selzer

Answer 1

它们并没有“破坏”Chrome开发工具；它忽略了它们，因为它不知道如何处理这些无效的选择器。你需要做的是，用类似于.projects-*的东西来替代。

*[class*='projects']

任何CSS代码检查工具都会指出这个问题。

我猜测开发工具认为整个文件都有问题，因此不想让你实时编辑剩余的规则。

- user663031