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

Answer 2

可能是这样的：

.parent .child:nth-last-child(4) {
    background-color: #f00;
}

Demo

Answer 3

如果您不介意更改HTML标记，那么解决方案就是：

<div class="parent">
  <p>Paragraph</p>
  <div>Broken</div>
  <div class="children">
    <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>

和

.child:first-child{
    background-color:#f00;
}

请参阅此fiddle。

Answer 4

我发现'：first-of-type '适用于此类内容：

#parent .child:first-of-type {
  background: red;
}

如果需要，您也可以将它用于最后一个：

#parent .child:last-of-type {
  background: red;
}

CSS - 选择班级为

4 个答案: