html - 将多个 HTML 元素合并为一个 CSS 类以显示选定状态

Question

我对 css 的东西比较陌生。I have ulwith a couple of lielements each lielement contain SVGand pelement.when that li is selected I want to add styling to those liand SVG,pelement

 <ul>
      <li>
    
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="22" height="22" viewBox="0 0 24 24"
            style="fill:#83868F">
            <path </svg> Infor 2</a> </li> <li class>
    
              <a href="#">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="22" height="22" viewBox="0 0 24 24"
                  style="fill:#83868F">
                  <path </svg> Infor 1
              </a> 
          </li>
     </ul>

我如何使用一个类来实现这一点？另外，我想知道如何将类动态应用于我的角度组件

标签： htmlcssangular

Answer 1

假设您将“ active”类添加到您的<ul>元素中：

ul.active{
  //add style here
}

ul.active li{
  //add li style here
}
ul.active svg{
  //add svg style here
}
ul.active p{
  //add p style here
}