CSS3组合选择器与OR或AND [英] CSS3 combining selectors with OR instead of AND
问题描述
给定此选择器：
body[class*="page-node-add-"][class~="page-node-edit"] {background:red;}
包含 page-node-add- 子类的类以及正好为 page-node-edit
It will match a body which has a class that contains a substring of page-node-add- AND a class which is exactly page-node-edit
我想说的匹配第一个或第二个（但不是两个）。可能吗？
I would like to say match the first OR the second (but not both). Is it possible?
使用逗号的问题：
有一个长选择器如下：
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可以补救，我想象的是：
That is a pain I would have thought CSS3 would remedy that, I was imagining something like:
body([class*="page-node-add-"]):or([class~="page-node-edit"]) {background:red;}
感谢
推荐答案
您需要使用逗号将它们分开：
You'll need to split them up using a comma:
body[class*="page-node-add-"], body[class~="page-node-edit"] {background:red;}
使用逗号的问题：
...是你不能用逗号以外的任何其他方式。也许它可以用Selectors 3补救，但不幸的是规范说。这只能通过选择器4 进行补救，因为它没有提出
... is that you can't do it any other way than with a comma. Perhaps it could have been remedied with Selectors 3, but unfortunately the spec says otherwise. That is only going to be remedied by Selectors 4, either because it wasn't proposed until recently, or it was proposed but didn't make the cut for level 3.
在等级4的选择器中，您将能够做这样的事情：
In level 4 of Selectors you will be able to do something like this:
body:matches([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}
目前， -proposed name，：any（），前缀为： - moz-any（）和： - webkit-any（）。但是在面向公众的CSS中使用：any（）是无意义的，因为
Currently, this is being implemented under its originally-proposed name, :any(), with the prefixes :-moz-any() and :-webkit-any(). But using :any() in public-facing CSS is pointless given that
-
只有Gecko和WebKit支持它;和
only Gecko and WebKit support it; and
您必须复制规则组，因为处理前缀选择器的方式，这不仅会破坏：matches（）选择器的预期目的，还会使事情更糟：
you have to duplicate your rulesets because of the way prefixed selectors are handled, which not only defeats the intended purpose of the :matches() selector, but makes things even worse:
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（），没有其他可行的解决方案（除了使用预处理器生成重复的选择器你）。
In other words, until implementations update themselves to the standardized :matches(), there is no other viable solution (save from using a preprocessor to generate the repeated selectors for you).
这篇关于CSS3组合选择器与OR或AND的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
