时间戳

首页 > 解决方案 > 将组件样式应用于页面中的最后一次出现

html - 将组件样式应用于页面中的最后一次出现

问题描述

我有一个自定义组件，它使用随附的样式文件自行格式化。在包含组件中，我生成了一系列自定义组件。我希望最后一个元素具有稍微不同的样式，但我更愿意从组件本身内部控制它。有可能吗？

我之前问过这个问题，但是当我正在寻找一个封装样式的 Angular 组件时，我得到了基于直接应用 CSS 的答案。

我得到的最接近的是申请:host(:last-child)，但并没有真正让它发挥作用。

div.lower{ border-top: 1px solid gold; ... }
div.lower:host(:last-child){ border-top: 1px solid olive; ... }

我准备了一个Blitzy来进行实验。目的是使最后一个元素中间没有金色分隔线。

标签： htmlcssangulartypescript

解决方案

由于div是组件宿主元素的后代，您可以使用以下选择器：

:host(:last-child) div.lower      // Applies the style on the last component instance
:host:not(:last-child) div.lower  // Applies the style except on the last component instance

为了避免在最后一个组件实例上出现金色分隔符，请尝试以下样式：

div.lower {
  display: flex;
  justify-content: center;
  min-width: 300px;
}

:host:not(:last-child) div.lower {
  border-top: 1px solid gold;
}

请参阅此 stackblitz以获取演示。

推荐阅读