Question

我在组件的最外层border-bottom: 1px solid pink上设置了样式div。该组件的用法类似于创建表的错觉的行。我希望其中的最后一个具有不同的样式（即使边框不可见）。

我希望使用:last-child，但注意到每个元素都具有样式，因为在组件的范围内，只有一个最外面的div。我在last中基于ngFor的值发现了this solution，但这对我来说并不好，因为这些行可能是数组的一部分，但在数组的后面逐一添加ngfor'ed。

我需要的一种功能是标记组件在页面上的最后一次出现，并相应地设置样式。但是是从组件本身内部完成的。可能吗？

以下是基于以下答案的摘录。第二个对象在第一个元素上没有得到额外的样式，而第一个元素却得到了（通过被分配类last）。

div.last {
  background-color: yellow;
}

div:host(:last-child) {
  background-color: yellow;
}

div {
  padding: 5px;
  margin: 5px;
  border: 2px solid black;
  max-width: 300px;
  display: flex;
  flex: 1;
  justify-content: center;
}

div.outer {
  border-color: purple;
}

div.middle {
  border-color: olive;
}

div.inner {
  border-color: orange;
}

div.multi {
  border-color: pink
}

div.last {
  background-color: yellow;
}

div:host(:last-child) {
  background-color: yellow;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <div class="multi">A</div>
      <div class="multi">B</div>
      <div class="multi last">C</div>
    </div>
  </div>
</div>

<div class="outer">
  <div class="middle">
    <div class="inner">
      <div class="multi">A</div>
      <div class="multi">B</div>
      <div class="multi">C</div>
    </div>
  </div>
</div>

Answer 1

以下css规则应起作用。您正在定位一个影子元素，该元素的容器是最后一个子容器

:host(:last-child) {
    border-bottom: solid 1px pink;
}

或

:host(:last-child) > div {
    border-bottom: solid 1px pink;
}

如何设置页面上最后一个Angular组件的样式？

1 个答案: