2017-09-05 33 views
0

在CSS中,如果我想给一个给定类的3个子类设置风格,是否有一种以不需要根类的方式做到这一点的简捷方法为每个子类重复?多个任意儿童的CSS短手

例如,让说我有这个网站:

<div class="parent1"> 
    <div class="subClass1">Sub-Class-1</div> 
    <div class="subClass2">Sub-Class-2</div> 
    <div class="subClass3">Sub-Class-3</div> 
    <div class="subClass4">Sub-Class-4</div> 
    <div class="subClass5">Sub-Class-5</div> 
    <div class="subClass6">Sub-Class-6</div> 
</div> 

<div class="parent2"> 
    <div class="subClass1">Sub-Class-1</div> 
    <div class="subClass2">Sub-Class-2</div> 
    <div class="subClass3">Sub-Class-3</div> 
    <div class="subClass4">Sub-Class-4</div> 
    <div class="subClass5">Sub-Class-5</div> 
    <div class="subClass6">Sub-Class-6</div> 
</div> 

我想使子类1,3,parent1红6(而不影响parent2子类)。我会做到这一点的方法是在CSS是:

.parent1 .subClass1, 
.parent1 .subClass3, 
.parent1 .subClass6 
{ 
    color: red; 
} 

是否有CSS语法在那里我可以做这样的事情,而不是:

.parent1 (.subClass1, .subClass3, .subClass6) 
{ 
    color: red; 
} 

......从而使parent1类只需键入一次?

+2

不,不在CSS中。您可能需要查看CSS预处理器,例如LESS或SASS。 – CBroe

+2

在navitve CSS中,没有。在像LESS或SASS这样的预编译器中,是的,你可以做'.class1 {.class2,.class3,.class3 {/ * styles * /}}' – Utkanos

+0

我不知道你不能只使用'nnth-child'这个。 – raina77ow

回答

2

不是你所描述的方式,但在具体的例子中,你可以使用nth-child样式每个奇数孩子:

.parent1 div:nth-child(odd) { 

} 

或者,如果每次你想指定的类中常见的有文本,你可以使用属性选择:

.parent1 div[class*=subClass] { 

} 

这将定向在同级车具有subClass某处parent1的所有儿童。所以在你的情况下会选择所有的孩子。

+1

我编辑了我的问题,强调我是在任意选择后(“奇数”不起作用)。 –