CSS3将选择器与OR组合而不是AND

Question

给定这个选择器：

body[class*="page-node-add-"][class~="page-node-edit"] {background:red;}

它将匹配一个主体，该主体具有一个包含 page-node-add- 子字符串的类和一个恰好是 page-node-edit 的类p>

我想说匹配第一个或第二个（但不能同时匹配）。有可能吗？

使用逗号的问题：

如果我有一个长选择器，例如：

body[class*="page-node-add-"] form.node-form > .field-type-field-collection > table > thead tr th,
body[class~="page-node-edit"] form.node-form > .field-type-field-collection > table > thead tr th
{...}

那是一种痛苦，我原以为 CSS3 可以解决这个问题，我在想像这样的东西：

body([class*="page-node-add-"]):or([class~="page-node-edit"]) {background:red;}

谢谢

Answer 1

您需要使用逗号将它们分开：

body[class*="page-node-add-"], body[class~="page-node-edit"] {background:red;}

使用逗号的问题：

... 是你不能用逗号以外的任何其他方式。也许它可以用 Selectors 3 来补救，但不幸的是规范另有说明。这只能由Selectors 4 来解决，要么是因为它直到最近才被提议，要么是因为它被提议，但没有进入第 3 级。

在选择器的第 4 级中，您将能够执行以下操作：

body:matches([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}

目前，这是在其最初提议的名称:any() 下实施的，前缀为:-moz-any() 和:-webkit-any()。但是在面向公众的 CSS 中使用 :any() 是没有意义的

1. 只有 Gecko 和 WebKit 支持；和

2. you have to duplicate your rulesets 因为前缀选择器的处理方式，这不仅违背了:matches() 选择器的预期目的，而且使事情变得更糟：

   body:-moz-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
   {...}
   body:-webkit-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
   {...}
   

换句话说，在实现将自身更新为标准化的:matches() 之前，没有其他可行的解决方案（除了使用预处理器为您生成重复的选择器之外）。

Answer 2

所以当我读到你的问题时，你真的想要XOR。 您可以通过使用:not 选择器并说“第一类而不是另一类”来实现这一点，反之亦然。

div.one:not(.two), div.two:not(.one) {
    background:red;
}

这是一个小提琴： http://jsfiddle.net/XfgxK/3/

Answer 3

我在这里找到了答案：

CSS Shorthand to identify multiple classes

Mozilla 和 webkit 有一个 -moz-any 或 -webkit-any，尽管在 CSS4 规范中有一个 :matches。很惊讶这在 CSS3 中没有想到，因为它可以大大减少重复代码的数量，而无需使用 SASS 或 LESS 或其他任何东西。