分组Css选择器(即子或选择器)

Question

是否可以将选择器嵌套或分组？例如,我有以下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的方式对许多选择器进行分组(我使用括号,但我意识到这不起作用):

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

我注意到CSS3有:not()选择器,但我找不到:或()选择器.

Answer 1

:any()在Fx 4+中实现:-moz-any()(和Saf 5.1和Chr 12+一样:-webkit-any(),虽然我从未在WebKit上测试过),请参阅https://developer.mozilla.org/en-US/docs/CSS/:any

注意:此伪类正在CSS Selectors Level 4中标准化,名称为:matches().可能会更改以下语法和名称:-vendor-any()以在不久的将来反映它.

这在媒体查询@ -rule中是相当不错的(除了最近的IE),否则你应该在你要设置样式的元素中添加一个HTML类,并在CSS选择器中使用这个类.或者使用预处理器,其中嵌套将为您节省一些重复次数.

请参阅@Christoph在不久的将来的答案 :matches()