使用CSS定位任何有任何两个类的元素呢？ [英] Use CSS to target any element that has ANY two classes on it?

问题描述

我们的生产环境使用与多个css类不兼容的适应技术。这意味着在设计HTML时很容易忘记和使用两个类，并且一旦生产就会断开。

Our production environment is using an adaptation technology that is incompatible with multiple css classes. This means it's easy to forget and use two classes when styling HTML, and have it break once it gets to production.

我想使用CSS作为突出显示当某人忘记并且意外地将两个类应用到一个元素时。

I would like to use CSS as a way to highlight when someone forgets and accidentally applies two classes to an element.

这样的事情是我的意图，当然这是无效的。它应该突出显示任何应用了两个类的元素：

Something like this is my intent, although of course this is invalid. It should highlight any element that has two classes applied to it:

.*.* { /* not valid (I wish) */
  outline:2px dotted red;
  }

我理解这将工作，如果我知道类，问题是我想标记任何两个类：

I understand that this would work if I knew the classes, the problem is I want to flag ANY two classes:

.classA.classB { /* not good enough */
  outline:2px dotted red;
  }

我知道我可以用JS和一个书签做这个，也许这是唯一的解决方案。如果只是CSS可能会更好，因为它会自动标记所有的开发人员和QA的东西。

I understand I could do this with JS and a bookmarklet, and maybe that is the only solution. If it is possible with just CSS that would be better as it would automatically flag things for all developers and QA.

推荐答案

大多数假阳性（例如空格填充的属性值），您可以使用此选择器：

To remove most false positives (e.g. space-padded attribute values), you can use this selector:

[class*=" "]:not([class^=" "]):not([class$=" "]) {
    outline: 2px dotted red;
}

这仍然不会过滤掉重复的类，例如 class =foo foo在你自己的回答中指出，但它比没有什么好，我认为发生的可能性比带有空白填充的类属性更少。

This still does not filter out repeated classes in values such as class="foo foo" as pointed out by Phrogz in your own answer, but it's better than nothing, and I think that's much less likely to occur than class attributes with whitespace padding.

这篇关于使用CSS定位任何有任何两个类的元素呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！