css - 分组 Css 选择器(即子 OR 选择器)

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() 选择器，但我找不到 :or() 选择器。

Answer 1

:any() 在 Fx 4+ 中实现为 :-moz-any()(以及 Saf 5.1 和 Chr 12+作为 :-webkit-any()，虽然我从未在 WebKit 上测试过)，参见 https://developer.mozilla.org/en-US/docs/CSS/: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 选择器中使用这个类.或者使用预处理器，其中嵌套会为您节省一些重复。

不久的将来请参阅@Christoph 的回答和:matches()