如何为 Ionic 中的每个活动选项卡设置不同的颜色

Question

我需要为 Ionic 中的活动标签设置颜色，包括图标和文本。问题出在颜色上：每个选项卡都不同，即如果激活，tab1 的颜色为“红色”，tab2 的颜色为“绿色”，等等。 在 CSS 中我写了一条规则：

.tab-button[aria-selected="true"] {
    color: color($colors, title-orders);
    ion-icon {
        background: color($colors, title-orders);
    }
    .tab-button-text {
        color: color($colors, title-orders);
    }

有一个<a> 标记，其值为[aria-selected="true"] 和2 个子元素：<ion-icon> 和<span>。 <ion-icon> 标签有特定的类图标，例如自定义法令，所以我可以使用规则，将图标颜色更改为我需要的颜色。但是文本在<span> 标签中，所以我不能在CSS 中改变它的颜色。 如何根据条件更改<ion-icon> 和<span> 颜色的颜色？它们是相邻元素。 据我所知，没有 CSS 方法可以做到这一点。此外，由于 Ionic 中的一些魔法，我无法在 HTML 中为选项卡设置特定的类 - 添加的类不会出现在我需要的地方 - 它出现得更晚。 如何在 Angular 中使用 JavaScript 做到这一点？

UPD：使用 SCSS 完成。示例如下：

ion-icon[ng-reflect-name="custom-orders"] {background: color($colors, title-orders);} ion-icon[ng-reflect-name="custom-orders"] + span {color: color($colors, title-orders);}

Answer 1

您可以尝试使用direct child selector > 选择作为a 元素的直接子元素的ion-icon 元素，使用adjacent sibling selector + 选择紧随其后的span 元素ion-icon:

a > ion-icon + span{
    ...
}

或者，您也可以使用a > span {...} 来选择所有span 元素，这些元素是a 元素的直接子元素（如果其中没有更多内容）。

至于向选项卡添加类，我使用 ionic 启动了一个新的“选项卡”项目，我可以在src/pages/tabs/tabs.html 中看到选项卡部分的 html，它甚至有一个颜色选择器，所以我假设您可以添加特定的类那里的标签？如果您需要更大的调色板更改，您还可以查看 src/theme/variables.css 以查看正在使用的全局主题。

编辑：最后，您可以结合使用 nth-child() 与之前的工具来定位每个不同的 tab 并更改其任何子级的 css，例如，如 this fiddle 中所示，单击每一行将更改 aria-selected 值，但每个跨度将获得不同的颜色。