html - CSS - 选择第一个 child 上课

Question

我最近一直在努力弄清楚为什么这不起作用。我开始绞尽脑汁试图为一个简单的问题找到一个好的解决方案，但我能找到的每一种方法似乎都很困惑。基本上我想做的是将一些样式应用于父级中具有特定类的第一个子级，在我的示例中，我试图将红色背景颜色应用于每个 .parent 中的第一个 .class 实例。你可以在 fiddle here 中看到我的尝试.

这是我创建的最终有效代码。问题是这看起来很乱，我真的不喜欢我必须将所有 .child 类设置为红色然后将除第一个之外的所有设置回白色的事实。一定有更清洁/更好的方法来做到这一点？

HTML

<div class="parent">
    <p>Paragraph</p>
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
</div>

<div class="parent">
    <p>Paragraph</p>
    <div>Broken</div>
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
</div>

CSS

/*** Does Not Work ***/
.child:first-child{
    background-color:#f00;
}

/*** Does Not Work ***/
.child:nth-of-type(1){
    background-color:#f00;
}

/*** Works But Is Messy! ***/
.child{
    background-color:#f00;
}
.child ~ .child{
    background-color:#fff;
}

Answer 1

它可能有点多，但你可以像这样使用 :not 和通用选择器 *:

*:not(.child) + .child {
  color: red;
}

<div class="parent">
  <p>Paragraph</p>
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
</div>

<div class="parent">
  <p>Paragraph</p>
  <div>Broken</div>
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
</div>

注意:但是，序列中的任何中断(另一个非子类 div 后跟另一个子类 div)都会重复选择器。

JSfiddle Demo