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; 
}

我知道这是错的，但只是给我的问题在这里，我要寻找一个清晰的概念。

来源

2015-07-21 Kiran Dash

我编辑了我的问题，使其更加清晰。我只需要一个div下的一组特定的类。 –

'a'，'c'和'e'只是一个随机的例子，或者您需要专门针对这些div？ – fcalderan

代码.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预处理器，就像SASS和LESS，给你更多的可能性。

来源

2015-07-21 11:35:02 LinkinTED

使用子选择器'>'。

CSS：

.home > div { 
    color: #ccc; 
}

来源

2015-07-21 11:33:40

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

来源

2015-07-21 11:39:14 fcalderan

如果想要提及expli类的名字（例如） a, b, c），但不希望重复您的源CSS，也许这是好主意，开始使用一些CSS预处理器，如Sass或less。例如，与萨斯您可以在.scss这个文件写：

.home { 
    .a, .c, .e { 
     background-color:#ccc; 
    } 
}

在输出萨斯将编译它的.css文件：

.home .a, .home .c, .home .e{ 
    background-color:#ccc; 
}

这将让你的源文件干净。

来源

2015-07-21 11:42:13 alynioke

在当前的CSS中，没有这样的语法。

CSS选择4 has :matches pseudo-class，将能够做这样的分组：

.home:matches(.a,.c,.e){ 
color:#ccc; 
}

不幸的是，它不是由浏览器支持呢。基于Gecko和WebKit/Blink的浏览器分别实现了一个旧草案:-moz-any()和-webkit-any()，但是您必须两次编写选择器才能使其在这些浏览器中正常工作，因此它们现在远没有实际用处。

但你可以用CSS预处理器来简化你的CSS。

来源

2015-07-21 11:46:39

CSS语法选择一个类下的多个元素

回答

相关问题