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

为什么不呢：

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

Answer 2

其中任何一个都会减少你的CSS：

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

或

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

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

共享一个公共类的CSS ID

2 个答案: