Css 如何在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);
    }

有一个

标记，它有值

[aria selected=“true”]

和两个子元素：

和

。

标记具有特定的类图标，例如，自定义法令，因此我可以使用规则将图标颜色更改为我需要的颜色。但是文本在

标记中，所以我不能在CSS中更改它的颜色。 如何根据的条件更改

和

颜色？它们是相邻元素。 据我所知，没有CSS方法可以做到这一点。另外，由于爱奥尼亚的一些魔力，我无法在HTML中为tab设置特定的类-添加的类不会出现在我需要的地方-它出现得晚了很多。 如何使用JavaScript在Angular中实现这一点

UPD：使用SCS完成。示例如下所示：

离子图标[ng reflect name=“custom orders”]{background:color（$colors，title orders）；} 离子图标[ng reflect name=“custom orders”]+span{color:color（$colors，title orders）；}

您可以尝试使用

选择

离子图标

元素，这些元素是

离子图标

的直接子元素，然后使用

+

选择紧跟在

离子图标

之后的

span

元素：

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

或者，您可以使用

a>span{…}

选择所有

span

元素，这些元素是

a

元素的直接子元素，前提是这些元素中没有其他元素

至于向选项卡添加类，我使用ionic启动了一个新的“选项卡”项目，我可以在

src/pages/tabs/tabs.html

中看到选项卡部分的html，其中甚至有一个颜色选择器，所以我假设您可以向选项卡添加特定的类？如果需要更大的调色板更改，还可以查看

src/theme/variables.css

，查看正在使用的全局主题

---

编辑：最后，您可以与前面的工具结合使用，针对每个不同的

选项卡

，并更改其任何子项的css，例如，如中所示，单击每一行将更改

aria selected

值，但每个跨度将获得不同的颜色。

是的，我知道。我将尝试解释我的问题：目前我的应用程序中有5个选项卡，它们的生成方式类似于

+

。活动选项卡的值为

[aria selected=“true”]

，而其他4个选项卡的值为

[aria selected=“false”]

。这就是我如何检测活动选项卡的方法。这不是问题。在这里，我可以更改活动选项卡的颜色。但我可以为任何活动选项卡设置颜色，无论它是第一个、第二个还是最后一个。我可以在CSS中更改颜色以激活，或者通过

variables.scss

中的变量使用。但我不能说“第一个活动颜色-红色，第二个-蓝色，等等”。这正是我所需要的-如果第一个选项卡活动-它应该是浅蓝色（图标和文本），如果第二个选项卡活动-它应该是紫色。颜色取自页面。因此，

标记可能处于活动状态，也可能不处于活动状态。这是第一刻。第二分钟我必须检查-哪个选项卡处于活动状态。Is

标记具有类

自定义命令

或

自定义命令

。例如，如果它有

自定义订单

，则需要将

和

的颜色设置为某个值。这就是我一整天都在努力的地方。那么，当每个选项卡处于活动状态时，使用设置css如何？请检查，如果这是您需要的，我将更新答案。您可以删除“aria selected=true”属性并看到颜色消失。