问题描述
是否可以将选择器嵌套或分组在一起?例如,我有以下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上测试),请参阅
: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
这在媒体查询@ -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或选择器)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!