CSS3选择器结合使用或者替代和CSS3选择器结合使用或者替代和(CSS3 combining se

鉴于这种选择：

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

谢谢

Answer 1:

你需要用逗号将它们拆分：

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

使用逗号的问题：

是......你不能这样做比用逗号任何其他方式。 或许可以得到补救与选择器3，但不幸的是规范，否则说。 这只会通过补救选择器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. 这只壁虎和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()没有其他可行的解决方案（使用预处理器生成重复选择为你保存）。

Answer 2:

我找到了答案在这里：

CSS缩写识别多个类

Mozilla和WebKit的有-moz-任何或-webkit-任何，虽然在CSS4规范有一个：匹配。 惊讶这不是在CSS3想到，因为这将大大降低但却难免重复代码量，而不必使用SASS或LESS或什么的。

Answer 3:

所以，你真的想XOR当我看到你的问题。 您可以通过实现这一目标:not选择器，并说“一个类，而不是其他”和周围的其他方式。

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

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

文章来源: CSS3 combining selectors with OR instead of AND