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

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> 

现在我想为两个示例应用不同的规则集(比如给第一个示例的“子”类留出 10 像素的边距，给第二个示例的“子”类留出 20 像素的边距)。使用 CSS 我将如何定义考虑到前一个 sibling 类的规则，即“goodchild”或“badchild”以及父类“parent”。

Answer 1

您可以使用“相邻兄弟选择器”(+) 实现这一点。

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