将组件样式应用于页面中的最后一次出现 [英] Apply component style to its last occurrence in a page

问题描述

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

I have a custom component and it's formatting itself using the accompanying style file. In the containing component, I generate a series of the custom ones. I'd like the last element to have a slightly different style but I'd prefer to control it from within the component itself. Is it possible at all?

我早些时候问了这个问题，但是当我寻找一个封装样式的Angular组件时，我得到了基于CSS直接应用的答案.

I asked this question earlier but got answers based on direct application of CSS while I'm looking for an Angular component encapsulating the style.

我最接近的是申请:host(:last-child)，但并没有真正起作用.

The closest I got was applying :host(:last-child) but didn't really got it working.

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

我准备了要使用的 Blitzy .目的是使最后一个元素在中间不具有金色分隔线.

I prepared a Blitzy to laborate with. The aim is to make the last element not to have a golden divider in the middle.

推荐答案

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

Since the div is a descendant of the component host element, you can use the following selectors:

: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

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

To avoid the golden separator on the last component instance, try these styles:

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

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

有关此stackblitz 的信息，请参见演示.

See this stackblitz for a demo.

这篇关于将组件样式应用于页面中的最后一次出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！