由于多个样式表导致 css 选择器特异性冲突

Question

好的，我一直在阅读 stackoverflow css 选择器。在线程上 here这种语法有什么区别？ ^= 是什么意思？它在选择什么？全部？

[class^='Rating'] 

和

div.Rating0_5

还有一个声明here上面写着:注意:允许重复出现相同的简单选择器，这会增加特异性。

这是什么意思？

我问是因为我必须清理网站上的大量 CSS 代码。有十几个样式表，每个样式表包含 200 多行代码，并且样式表中有一些样式相互覆盖，如果重复出现会增加特异性，甚至可能在样式表中。逐行浏览样式表以找出哪个特定的类、div 等覆盖了另一个是很费力的，有些特殊性是七个选择器深!这对我来说几乎是不可能的，而且压力很大。

有没有一种工具可以使用目标样式来覆盖其他样式？它易于使用吗？它究竟有什么作用？如果不是，我如何才能编写具有足够特异性的 CSS，而不需要非常长的选择器来确保唯一性，以免它们被另一个样式表规则覆盖？

谢谢，我希望这是有道理的，并且有人有过这种经历。

Answer 1

^= 是 CSS 选择器的“开头”。在您的情况下，它将适用于名称以“评级”开头的类。

使用传统的 CSS，您必须制作非常长的选择器才能具体化，我认为该声明意味着您可以拥有重复的选择器，并且样式将被组合。

在清理 CSS 方面，我没有关于自动化工具的好建议，但你可以看看 http://sass-lang.com/ (SCSS)在 CSS 之上的更好的语法层，它可以选择器的变量和继承。大量清理 CSS。