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中为标签设置特定的类 - 添加的类没有出现在我需要的地方 - 它出现的时间要晚得多。如何使用JavaScript在Angular中执行此操作？

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 >选择ion-icon元素作为a元素的直接子元素，adjacent sibling selector +选择紧跟在span之后的ion-icon元素：

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

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

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

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

如何为Ionic

1 个答案: