分组Css选择器（即子OR或选择器） [英] Grouping Css Selectors (i.e. child OR selectors)

问题描述

是否可以将选择器嵌套或分组在一起？例如，我有以下css：

Is it possible to nest or group selectors together? For example I have the following css:

.feature > *:hover > .info,
.feature > .select > .info   {bottom:0;}
.feature > *:hover > .img,
.feature > .select > .img,
.feature > *:hover > .link,
.feature > .select > .link   {top:-25px;bottom:51px;}

选择器的方式类似于以下伪CSS（我使用括号，但我意识到这不工作）：

Is it possible to group many of the selectors in a way similar to the following pseudo CSS (I'm using brackets, but I realise this doesn't work) :

.feature > (*:hover,.select) > .info         {bottom:0;}
.feature > (*:hover,.select) > (.img,.link)  {top:-25px;bottom:51px;}

CSS3有：not（）选择器，但我找不到一个：or（）选择器。

I notice that CSS3 has the :not() selector, but I couldn't find an :or() selector.

推荐答案

： - moz-any（）（和：any（） Saf 5.1和Chr 12+为： - webkit-any（），虽然我从未在WebKit上测试），请参阅 https://developer.mozilla.org/en-US/docs/CSS/:any

:any() is implemented in Fx 4+ as :-moz-any() (and Saf 5.1 and Chr 12+ as :-webkit-any(), though I never tested on WebKit), see https://developer.mozilla.org/en-US/docs/CSS/:any

注意：这个伪类正在进行中，在CSS选择器Level 4中以：matches（）的名称进行标准化。很可能会改变：-vendor-any（）的语法和名称，以反映它在不久的将来。

Note : This pseudo-class is in progress to be standardized in CSS Selectors Level 4 under the name :matches(). It is likely that the syntax and name of :-vendor-any() will be changed to reflect it in the near future.

这在媒体查询@ -rule（除了最近的IE）是相当不错，否则你应该添加一个HTML类到你想要风格的元素，并在CSS选择器中使用这个类。

This is quite OK in a media query @-rule (except for recent IE) and otherwise you should add an HTML class to the element you want to style and use this class in your CSS selector. Or use a preprocessor where nesting will save you a few repeats.

请参阅@Christoph answer for the near future和：matches（）

See @Christoph answer for the near future and :matches()

这篇关于分组Css选择器（即子OR或选择器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！