CSS语法选择一个类下的多个元素
问题描述:
HTML:CSS语法选择一个类下的多个元素
<div class="home">
<div class="a">
A content
</div>
<div class="b">
B content
</div>
<div class="c">
C content
</div>
<div class="d">
D content
</div>
<div class="e">
E content
</div>
</div>
申请普通样式A,C和E岁以下儿童家庭类,我们可以使用多个CSS选择器下面写的。
CSS:
.home .a,.home .c,.home .e{
background-color:#ccc;
}
问: 什么是上述CSS的较短的版本?
现在作为一个c和e是家常见的孩子。我不是一次又一次重复.home
如何编写一个较短的语法来选择家庭课下的a,b和c类。
也许是这样的:
.home(.a,.c,.e){
color:#ccc;
}
我知道这是错的,但只是给我的问题在这里,我要寻找一个清晰的概念。
答
代码.home(.a,.c,.e)
将无法正常工作,并没有OR
运营商CSS选择器。 home .a,.home .c,.home .e
是最短的路。
但这里的几个选择,可以帮助你:
.home div { } /* all divs in home */
.home > div { } /* all divs that are a direct child of .home */
.home * { } /* all elements in .home */
.home > * { } /* all direct children of .home */
答
使用子选择器'>'。
CSS:
.home > div {
color: #ccc;
}
答
div
与a
类,c
和e
可使用:nth-child
伪类
.home > div:nth-child(2n + 1) {
background-color:#ccc;
}
与所述给定标记这个被选择相当于
.home .a, .home .c, .home .e{
background-color:#ccc;
}
Codepen实施例:http://codepen.io/anon/pen/XbPNPw
答
在当前的CSS中,没有这样的语法。
CSS选择4 has :matches
pseudo-class,将能够做这样的分组:
.home:matches(.a,.c,.e){
color:#ccc;
}
不幸的是,它不是由浏览器支持呢。基于Gecko和WebKit/Blink的浏览器分别实现了一个旧草案:-moz-any()
和-webkit-any()
,但是您必须两次编写选择器才能使其在这些浏览器中正常工作,因此它们现在远没有实际用处。
但你可以用CSS预处理器来简化你的CSS。
我编辑了我的问题,使其更加清晰。我只需要一个div下的一组特定的类。 –
'a','c'和'e'只是一个随机的例子,或者您需要专门针对这些div? – fcalderan