html - 将 css 类应用于我的 ngx-gallery-9 数组中的第一个图像

Question

我在这里有这个ngx-gallery-9 stackblitz，我正在尝试弄清楚如何将 :first-of-type 或 nth-child(1) 应用于图片库中的“fa-star”图标。

问题- 我只想为画廊中的第一个“fa-star”字体真棒图标着色。所以只有第一张图片是黄色的。

我尝试了几种不同的方法，但它们似乎都将 css 应用于每个图标或没有图标，而不仅仅是第一个

我在下面尝试过的几件事没有运气

:host >>> ngx-gallery-action:first-of-type .fa-star:first-of-type {
      color: yellow;
}

:host >>> fa-star:first-of-type {
      color: yellow;
}

:host >>> .fa-star:nth-child(1) {
      color: yellow;
}

Answer 1

不要在星形上使用第 nth-of-type，而是在第一个图像（容器）上，然后是星形上。

因为星星永远是每个容器中的第一颗星星。

https://stackblitz.com/edit/angular-bootstrap-4-starter-mttiqx?file=src%2Findex.html

所以它将是：

.ngx-gallery-image:first-of-type .fa-star { color:#fc0; }

Answer 2

你有没有试过'nth-of-type'这样的东西：

.fa-times-circle:nth-of-type(1) {
  display: none !important;
}

编辑：试试这个代码：

.ngx-gallery-icons-wrapper > .fa-times-circle:nth-of-type(1) {
  display: none !important;
}