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} {s} {s}}中。

更少：如何在nth-child中引用父级

1 个答案: