Question

我正在使用Vue，第三方模板，动态插件和各种技巧来开发应用程序。我对CSS感到非常困难。

通常，我需要在页面上设置特定元素的样式，例如[[[0., 1.], [1., 1.], [0., 0.]], [[1., 1.], [0., 0.], [0., 1.]]]，但我不知道如何编写一个实际起作用的选择器。输入可能是由某些Javascript动态创建的，可能是通过编程方式应用了CSS。

因此，我转到Firefox Web Developer，单击元素，然后查看一堆CSS类。我创建了一条规则：

<input>

将myCustomClass放在.myCustomClass { color: red; }的class =“”标记中，...什么也没有。

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

<input>

但这很少起作用。有时我放弃并添加.someOuterClass .someInnerClass .myCustomClass { color: red; }。有时行得通，有时却行不通。

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

我已经了解了特异性，但这无济于事。

Answer 1

有时，特殊性是PITA，尤其是在其他第三方库向其中添加内容时。

您可以尝试以下操作：

确保将样式添加到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预先构建的样式。

一个警告，如果通过JavaScript在某个地方内联添加CSS，将很难覆盖它。您可能需要结合使用!important。

Answer 2

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

可能是，但是为什么要打扰呢？您已经在向元素添加了类属性。为什么不添加内联样式属性呢？添加束类或ID只是为了创建用于修饰样式的特异性链，这很杂乱……内联样式一点也不差，而且更容易理解。

内联属性是您可以提供的最具体的CSS指示。

如何调试CSS特殊性问题？

2 个答案: