3

是否可以将选择器嵌套或组合在一起？例如，我有以下 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() 选择器。

4

4 回答 4

5

:any()在 Fx 4+ as 中实现:-moz-any()（以及 Saf 5.1 和 Chr 12+ as :-webkit-any()，尽管我从未在 WebKit 上测试过），请参阅https://developer.mozilla.org/en-US/docs/CSS/:any

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

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.

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

于 2013-03-01T13:39:51.000 回答
4

可以使用在Selectors Level 4:matches()中定义的伪类（当前处于编辑器草稿状态，因此可能会发生变化），目前在任何浏览器中都没有实现:-D

在那之前，你注定要像以前那样写它。

于 2013-03-01T13:23:25.007 回答
1

不，很遗憾，在正常情况下这是不可能的。您必须使用CSS 预处理器，例如：

  1. 较少的
  2. SASS

一个例子：

.feature {
    > *:hover, > .select {
        .info {
            bottom: 0;
        }
    } 
 }
于 2013-03-01T13:17:09.663 回答
0

不，CSS 无法将许多 CSS 选择器组合成一行。他们必须用自己的线路分开。

于 2013-03-01T13:16:06.403 回答