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来补救,但不幸的是,这个插图没有这样做。这只能通过

目前,这项工作正在其最初拟议名称:any() 下实施,前缀 :-moz-any() 和 :-webkit-any() 。但使用 :any() 在公用CSS中是毫无意义的,因为

只有 Gecko 和 WebKit 支持它;

< a href=" "https://stackoverflow.com/a/8318202/106224" 您必须重复您的规则 ,因为前缀选择器的处理方式不仅违背了 < code>: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 识别多类

Mozilla 和 Webkit 拥有一个 -moz-any 或 -webkit-any, 尽管在 CSS4 中有一个 : a:matches。令人惊讶的是,在 CSS3 中没有想到这一点,因为这会大大降低重复代码的数量,而不必使用 SSSS 或 LESS 或诸如此类的代码。

Answer 3

So you really want XOR when I read your question. You can achive this by using the :not selector and say "class one and not the other" and the other way around.

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

Here is a fiddle: http://jsfiddle.net/XfgxK/3/

友情链接