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 的类的正文p>

我想说匹配第一个或第二个(但不能同时匹配).有可能吗?

使用逗号的问题:

如果我有一个长选择器，例如:

body[class*="page-node-add-"] form.node-form >.field-type-field-collection >表>头 tr th,body[class~="page-node-edit"] form.node-form >.field-type-field-collection >表>标题{...}

那是一种痛苦，我原以为 CSS3 会解决这个问题，我在想像这样的东西:

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

谢谢

解决方案

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

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 >表>标题{...}

目前，这是在其最初提议的名称 :any() 下实现的，前缀为 :-moz-any() 和 :-webkit-any().但是在面向公众的 CSS 中使用 :any() 是没有意义的，因为

1. 只有 Gecko 和 WebKit 支持；和

2. 你必须复制你的规则集，因为前缀选择器的处理方式，这不仅会破坏:matches() 选择器的预期目的，但使事情变得更糟:

   body:-moz-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form >.field-type-field-collection >表>标题{...}正文:-webkit-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form >.field-type-field-collection >表>标题{...}

换句话说，在实现将自身更新为标准化的 :matches() 之前，没有其他可行的解决方案(除了使用预处理器为您生成重复的选择器之外).

Given this selector:

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

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?

The problem with using a comma:

If I have a long selector like:

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
{...}

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

Thanks

解决方案

You'll need to split them up using a comma:

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

The problem with using a comma:

... 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.

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
{...}

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

1. only Gecko and WebKit support it; and

2. 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
   {...}
   

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屋！