如何调试 CSS 特异性问题？

Question

我用 Vue、第三方模板、动态插件和各种诡计开发了一个应用程序。我很难使用 CSS。

通常我需要为页面上的特定元素设置样式，例如<input>，但我不知道如何编写一个真正有效的选择器。输入可能是由某些 Javascript 动态创建的，并且可能以编程方式应用了 CSS。

所以我去 Firefox Web Developer，点击元素，然后看到一堆 CSS 类。我创建一个规则：

.myCustomClass {
  color: red;
}

将 myCustomClass 放入 <input> 的 class="" 标记中，然后……什么都没有。

我想我需要像这样添加前缀：

.someOuterClass .someInnerClass .myCustomClass {
  color: red;
}

但这很少奏效。有时我放弃并添加!important。有时有效，有时无效。

所以我的问题是，我是否可以检查我在 Web Developer 中可以看到的类并以某种方式得出一个足够具体的规则以使其始终有效？

我读过关于特异性的文章，但没有帮助。

Answer 1

有时，特异性是一种 PITA，尤其是当其他第 3 方库添加内容时。

您可以尝试以下几点：

• 确保将您的样式添加到 CSS 的 END。 Theoretically，可以影响Webpack包含CSS的顺序（我没试过）

• 将ID 而不是class 添加到要更改的元素外部的包装器中。然后在 CSS 链中引用这个 ID 例如：#myAppID .className .subClassName {} 基本上 ID 比 CSS 特异性中的类强。我会尝试在页面/视图级别执行此操作，以使生活更轻松。

• 如果元素已经获得类（正如您在检查器中看到的那样），请尝试使用您的“覆盖”CSS 重用这些类。如果这些类是模块化的（有一个像someClass__34xft5 这样的随机后缀），你不应该使用那些确切的类，因为如果重新编译源代码它们可能会改变。在这种情况下，请使用“匹配”选择器 [class^=”someClass__”] 来匹配具有该前缀的任何选择器。

不确定您想深入到什么程度，但 here's an article 关于覆盖 Amplify-Vue 预构建样式。

需要注意的是，如果 CSS 是通过 javascript 在某处内联添加的，那么将很难覆盖。您可能希望将!important 与上述内容结合使用。

Answer 2

“...我可以检查我可以在 Web Developer 中看到的类，并以某种方式导出一个足够具体的规则以使其始终有效吗？”

可能，但是为什么要麻烦呢？您已经为元素添加了类属性。为什么不添加内联样式属性呢？添加 一堆 类或 id 只是为了创建一个特异性链来修饰样式是相当混乱的……内联样式几乎没有更糟，而且更容易理解。

内联属性是您可以给出的最具体的 CSS 指令。