Less：如何引用nth-child中的parent

Question

这就是我所拥有的：

减 ：

.parent{
  &-caption{
    color:red;
  }

  &:first-child{
    border: solid blue !important;
    &-caption{
      color:blue !important;
    }
  }
}

HTML

<div class="parent">
  <div class="parent-caption">One</div>
</div>
<div class="parent">
  <div class="parent-caption">Two</div>
</div>
<div class="parent">
  <div class="parent-caption">Three</div>
</div>

问题：但第一个孩子的标题颜色不会变成蓝色。

这在LEss有可能吗？我知道在Sass中这是可能的。

谢谢

Answer 1

你对以下css的编译较少：

.parent-caption {
  color: red;
}
.parent:first-child {
  border: solid blue !important;
}
.parent:first-child-caption {
  color: blue !important;
}

如您所见，这不是真正有效的CSS。在较少的css网站上有一个playground，允许您预览css代码的编译方式。

我建议你做这样的事情

.parent .parent-caption {
  color: red;
}
.parent:first-of-type .parent-caption {
  color: blue;
}

<div class="parent">
  <div class="parent-caption">One</div>
</div>
<div class="parent">
  <div class="parent-caption">Two</div>
</div>
<div class="parent">
  <div class="parent-caption">Three</div>
</div>

您可以在Less中这样做：

.parent {
  &-caption {
    color: red;
  }
  &:first-of-type &-caption{
    color: blue;
  }
}

此功能的解释是在父选择器标题下的Less css的features page上。