2

鉴于此选择器：

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

谢谢

4

3 回答 3

3

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

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

于 2012-05-25T10:57:35.710 回答
1

我在这里找到了答案：

用于识别多个类的 CSS 速记

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

于 2012-05-25T11:14:09.303 回答
1

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

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

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

于 2012-05-25T11:27:58.110 回答