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

使用逗号的问题：

...除了用逗号之外你不能用别的方式去做。也许它可以通过选择器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()是没有意义的

只有Gecko和WebKit支持它;以及

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

我在这里找到了答案：

CSS Shorthand to identify multiple classes

Mozilla和webkit有-moz-any或-webkit-any，但在CSS4规范中有一个：匹配。在CSS3中没有考虑到这一点，因为它会大大减少重复代码的数量，而不必使用SASS或LESS或其他任何东西。

Answer 3

所以当你读到你的问题时，你真的想要XOR。你可以使用:not选择器来说明这一点，然后说“一级而不是另一级”，反之亦然。

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

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

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

3 个答案: