CSS3 使用 OR（而不是 AND）组合选择器

给定这个选择器：

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

它将匹配一个主体，该主体的类包含以下子字符串页面节点添加-并且一个类正是页面节点编辑

我想说匹配第一个或第二个（但不是两者）。是否可以？

使用逗号的问题：

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

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;}

Thanks

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

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

使用逗号的问题：

...除了用逗号之外，你不能用任何其他方式来做到这一点。也许可以用 Selectors 3 来解决这个问题，但不幸的是规范另有规定。这只能通过以下方法来解决选择器4 http://www.w3.org/TR/selectors4/#matches，要么是因为它直到最近才被提出，要么是因为was提议但未晋级 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() and :-webkit-any()。但使用:any()考虑到面向公众的 CSS 是毫无意义的

1. 只有 Gecko 和 WebKit 支持；和

2. 你必须复制你的规则集 https://stackoverflow.com/a/8318202/106224由于前缀选择器的处理方式，这不仅违背了: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()，没有其他可行的解决方案（除了使用预处理器为您生成重复选择器之外）。