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() 之前，没有其他可行的解决方案(除了使用预处理器为您生成重复的选择器之外)。