如何在样式表中的一个父id下对多个类进行不同的样式设计

Question

我想在同一个id下以不同的方式设置多个类，但不要每次在其中设置类的样式时都提到id。我想使用下面的代码

#fold-6 {    
    .headlg {
    font-family: 'Noto Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 47px !important;
    line-height: 55px !important;
    letter-spacing: -0.5px !important;
    color: #000000 !important;
    }


    .paralg {
        font-family: 'Noto Sans', sans-serif !important;
        font-style: normal !important;
        font-weight: 400 !important;
        font-size: 18px !important;
        line-height: 35px !important;
        letter-spacing: 0.02em !important;
        color: #000000 !important;
    }
}      

而不是再次重复id，如下所示

#fold-6 .headlg {
        font-family: 'Noto Sans', sans-serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 47px !important;
        line-height: 55px !important;
        letter-spacing: -0.5px !important;
        color: #000000 !important;
        }
        

#fold-6 .paralg {
            font-family: 'Noto Sans', sans-serif !important;
            font-style: normal !important;
            font-weight: 400 !important;
            font-size: 18px !important;
            line-height: 35px !important;
            letter-spacing: 0.02em !important;
            color: #000000 !important;
        }
    }      

Answer 1

你可以用:is() pseudo-class

 #fold-6 :is(.headlg, .paralg) {}

​

div :is(p, span) {
  color: red;
}

<div>
  <p>Lorem, ipsum dolor.</p>
  <span>Lorem ipsum dolor sit.</span>
</div>

​