根据父类使用CSS更改图标颜色[关闭]

x6h2sr28  于 2023-05-02  发布在  其他
关注(0)|答案(1)|浏览(154)

已关闭,此问题需要details or clarity。目前不接受答复。
**想改善这个问题吗?**通过editing this post添加详细信息并澄清问题。

5天前关闭。
Improve this question
我在CSS方面不是很强。我正在使用Accordion组件中的Angular 8和ui-accordion类。
在标题里面我添加了一个图标,我想默认情况下是红色的。所以在我的css里我有

.pi-info-circle { color: red; }

这个很好用。但是,当选择选项卡时,我想将此图标的颜色更改为白色。
看起来ui-accordion-header有一个ui-state-active类,当它处于活动状态时,它会被放在上面。
我试过选择器,比如:

.ui-accordion .ui-accordion-header.ui-state-active .pi-info-circle { color: white; }

但是当选项卡被选中时它不会变成白色。如果ui-accordion-header类中有ui-state-active类,我可以将这些颜色从红色切换到白色,其中红色是默认值,白色是默认值。

o7jaxewo

o7jaxewo1#

我认为这与你如何指定选择器和html的结构有关。
下面的代码可以正常工作:

.ui-accordion .pi-info-circle { color: red; }

.ui-accordion.active .pi-info-circle {color: white; }

.container{
  background-color: blue;
}

.container > div{
  font-weight: 600;
}
<div class="container">
  <div class="ui-accordion">
    <div class="pi-info-circle">
      Foo
    </div>
  </div>

  <div class="ui-accordion active">
    <div class="pi-info-circle">
      Bar
    </div>
  </div>
 </div>

相关问题