html - 如何调试 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 特异性方面比类强。我会尝试在页面/ View 级别执行此操作，以使生活更轻松。

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

不确定你想去多深，但是 here's an article关于覆盖 Amplify-Vue 预构建样式。

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