Question

考虑以下示例：

 <div class='parent'>  
      <a class='goodchild'>I am good</a>  
      <p class='child'>..</p>  
    </div>

和

 <div class='parent'>  
      <a class='badchild'>I am bad</a>  
      <p class='child'>..</p>  
    </div>

现在我想为这两个例子应用不同的规则集（比如给第一个例子＆＃39; s＆＃39; child＆＃39; class一个10px的边距，第二个例子＆＃39; s＆＃39; child＆＃39;分级为20px）。使用CSS我如何定义考虑到前兄弟班级的规则，即好孩子＆＃39;或者＆＃39; badchild＆＃39;和父母的父母＆＃39;。

Answer 1

您可以使用“相邻兄弟选择器”（+）实现此目的。

.goodchild + .child {
    margin: 10px;
}
.badchild + .child {
    margin: 20px;
}

Answer 2

试试这个：尝试adjacent siblings selector定位最近的兄弟元素

.parent .goodchild + .child {
    margin:10px;
}
.parent .badchild + .child {
    margin:20px;
}

Fiddle

Answer 3

.parent .goodchild{
   margin:10px;
}

.parent .badchild{
   margin:20px;
}

这应该有用。

将样式应用于具有基于父div类及其先前兄弟类的类的元素

3 个答案:

Fiddle