javascript - LESS/CSS 向输入添加第二个类以覆盖第一个类的宽度

Question

我正在使用 JQUERY 向输入元素添加两个类:

JQUERY:

.addClass('dollar_input survey_txtBx');

问题:LESS/CSS 使用的宽度由 .survey_txtBx 设置为 50px，但我最近添加了 .dollar_input 类来覆盖宽度并将其设置为 150px。

结果:在浏览器中，当我测试时，我看到了两个类，但 dollar_input 宽度属性有一个删除线，告诉我 surbey_txtBx 正在提供宽度属性。

CSS:

    .survey_txtBx{
            width: 50px;
            height: 30px;
            text-align: center !important;
            margin: 0 2px;
            border: 1px solid @light-gray_d20;
            font-weight: 400;
            color: cadetblue;
            .border-radiuses();
            &::-webkit-input-placeholder {
            font-size: 12px;
            opacity: .75;
            }

            &::-moz-placeholder {
            font-size: 12px;
            opacity: .75;
            }

            &:-ms-input-placeholder {
            font-size: 12px;
            opacity: .75;
            }

            &:-moz-placeholder {
            font-size: 12px;
            opacity: .75;
            }

        &.input-validation-error {
                border-color: @red;
                &:focus {
                    border-color: @red;
                }
                &.warning{
                    border-color: @orange;
                    &:focus {
                        border-color: @orange;
                        }
                }
            }

        &.long{
            width: 450px;
            text-align: left !important;
            padding: 0 5px;
        }
        &.medium{
            width: 250px;
            text-align: left;
            padding: 0 5px
        }

        &:focus{
            &::-webkit-input-placeholder {
            opacity: 0;
            }

            &::-moz-placeholder {
                opacity: 0;
            }

            &:-ms-input-placeholder {
                opacity: 0;
            }

            &:-moz-placeholder {
                opacity: 0;
            }
        }
    }   
}

.dollar_input{width:150px;}

问题:我应该将 dollar_input 设置为 survey_txtBx 的子类吗？

Answer 1

看到 .survey_txtBx 下面的大括号:-

    .survey_txtBx { 
       ...
    }
}
.dollar_input { 
   ...
}

我假设 .survey_txtBx 在另一个选择器中，如下所示:-

#other-selector{
    .survey_txtBx { 
       ...
    }
}
.dollar_input { 
   ...
}

在这种情况下，当 LESS 被编译时，它将创建以下内容:-

#other-selector .survey_txtBx { width:50px; }
.dollar_input { width:150px; }

一个简单的解决方法是将 .dollar_input 与 .survey_txtBx 内联:-

#other-selector{
    .survey_txtBx{
       width:50px;
       ....
    }
    .dollar_input{
       width:150px;
    }
}

这将使两者与上次获胜的权重相同。