使用 CSS 来定位具有任何两个类的任何元素？答案

【问题标题】：Use CSS to target any element that has ANY two classes on it?使用 CSS 来定位具有任何两个类的任何元素？
【发布时间】：2013-02-05 00:25:26
【问题描述】：

我们的生产环境正在使用与多个 css 类不兼容的适配技术。这意味着在设置 HTML 样式时很容易忘记和使用两个类，并且一旦投入生产，就会破坏它。

我想使用 CSS 来突出显示某人忘记并意外地将两个类应用于一个元素。

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

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

我知道如果我知道这些类，这会起作用，问题是我想标记任何两个类：

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

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

【问题讨论】：

【解决方案1】：

我刚刚找到了一个可以接受的答案：

[class*=" "] {
  outline:2px dotted red;
  }

这会突出显示类属性中带有空格的任何内容。它会得到一些误报，因为有时类属性中的空格是由于清晰的服务器端代码而合法发生的，但我更喜欢误报而不是误报。

有更好的想法吗？

【讨论】：

【解决方案2】：

要删除大多数误报（例如空格填充的属性值），您可以使用此选择器：

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

这仍然不会过滤掉像 class="foo foo" 这样的值中的重复类，正如 Phrogz 在您自己的回答中指出的那样，但总比没有好，而且我认为这比带有空格填充的类属性发生的可能性要小得多。

【讨论】：

【解决方案3】：

仅使用 CSS 是不可能的。

而且，如果我可以这样说，您的生产环境很愚蠢。没有多个类的 CSS 就像一个标签云，每个项目只允许一个标签。它破坏了一些目的。修复您的生产环境以不以这种方式滥用 CSS，而不是限制您的作者正确地、语义地描述内容。

【讨论】：