css - 共享一个公共类的 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
}

第一个选项比第二个选项具有更大的特异性，如果您要覆盖样式，请记住这一点。

Answer 2

为什么不只是：

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