Question

我需要选择一个元素的子元素，但是它基于父元素上的：last-of-type。

我尝试过：

&:last-of-type {
  &__content {
    border-bottom: 0;
  }
}

由于SASS的构造方式，这不起作用。

我最终得到了：

.assignment-selection {
  &__list-item {
    &__content {
      border-bottom: 1px solid;
    }
    &:last-of-type {
      .assignment-selection {
        &__list-item {
          &__content {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

是否有更好/更有效的方式编写此代码？

Answer 1

这应该做

&:last-of-type > &__content {
  border-bottom: 0;
}

Answer 2

您可以使用常规CSS来解决此问题（如果可以的话）

css：

.parent>li {
  border: 1px solid red;
}

.parent:last-of-type>li {
  border: 1px solid green;
}

html：

<div class="parent">
  <li class="child">text</li>
</div>
<div class="parent">
  <li class="child">text</li>
</div>
<div class="parent">
  <li class="child">text</li>
</div>

这是相关的提琴：http://jsfiddle.net/ugskwa7t/

Answer 3

仅仅因为 SASS 允许嵌套并不意味着我们应该总是嵌套，因为它使 CSS 有点不可读，在浏览器的开发工具中更是如此，这会使代码更难进行调试。

.assignment-selection {
  &__list-item {
    &__content {
      border-bottom: 1px solid;
    }
  }
}

.assignment-selection:last-of-type {
  &__list-item {
    &__content {
      border-bottom: 0;
    }
  }
}

在这种情况下，有没有更好的方法使用嵌套的SASS和选择器？

3 个答案: