CSS3将选择器与OR或AND相结合

Question

给定此选择器：

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

它将匹配一个正文，该正文的类包含 page-node-add- 的子字符串，而类恰好是 page-node-edit

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

使用逗号的问题：

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

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

使用逗号的问题：

…是除了逗号以外，您无法做其他任何事情。也许可以使用Selectors3进行补救，但不幸的是该规范另有说明。选择器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()。但是:any()鉴于此，在面向公众的CSS中使用毫无意义

1. 只有Gecko和WebKit支持它；和

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