共享公共(public)类的 CSS ID

Question

我有一个名为:mtl_navBtn[1-3] 的 ID，其中包含一个名为:“x-button-label”的类。我正在尝试为该组合定义 css，而不是像我在下面所做的那样重复 css 样式，但我似乎无法做到正确。我试过:#mtl_navBtn1,#mtl_navBtn2,#mtl_navBtn3 .x-button-label 但没有用。我确定我在这里遗漏了一些简单的东西......

<div id="mtl_navBtn1" class="x-button x-iconalign-left x-button-plain" style="margin-top: -30px; width: 52px !important; height: 225px !important;"><span id="ext-element-40" class="x-badge" style="display: none;"></span>
    <span class="x-button-icon etl_nav_btn etl_nav_btn_1_0_active" id="ext-element-42" style="">
    </span><span id="ext-element-41" class="x-button-label" style="">Label</span>
    </div> 





 #mtl_navBtn1 .x-button-label{
        width: 50px         !important;
        height: 50px        !important;
        margin-left: -47px  !important;
    }
    #mtl_navBtn2 .x-button-label{
        width: 50px         !important;
        height: 50px        !important;
        margin-left: -47px  !important;
    }
    #mtl_navBtn3 .x-button-label{
        width: 50px         !important;
        height: 50px        !important;
        margin-left: -47px  !important;
    }

Answer 1

这两种方法都会精简你的 CSS:

#mtl_navBtn1 .x-button-label,
#mtl_navBtn2 .x-button-label,
#mtl_navBtn3 .x-button-label {
    // styles
}

或

[id^="mtl_navBtn"] .x-button-label {
    // styles
}

第一个选项比第二个选项更具体，如果您要覆盖样式，请记住这一点。