LESS/CSS加入第二类的输入来覆盖

我使用JQUERY到两个类添加到一个输入元件的第一类的宽度：LESS/CSS加入第二类的输入来覆盖

JQUERY：

.addClass('dollar_input survey_txtBx');

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

结果：在浏览器中，当我测试时，我看到两个类，但是dollar_input的宽度属性有一个告警，告诉我surbey_txtBx提供了width属性。

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的？

来源

2016-11-30 Denoteone

看到下面.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; 
    } 
}

这将使最后一次获胜的重量都相同。

来源

2016-11-30 19:54:34 BenG

感谢@BenG你抓住了那个尾随支架，它把我扔掉了，因为我以为我把dollar_input放在线上，但是之后我却因为最后一个支架而在它之外......如果这是有道理的。 – Denoteone

您的浏览器将使用CSS中定义的最精确或最新文件中的样式。

.classA { 
    width: 100px; 
} 
.classB { 
    width: 150px; 
}

如果你有class="classA classB"元素的width元素将是150px（因为classB后 CLASSA存在[在CSS的定义，而不是class="..."属性中]）。

您可以检查这个片段：（如果你想强制一个特定的类在其他一些类）

div { width: 100px; border: 1px solid red; margin: 10px; color: white; } .classA { background: blue; } .classB { background: black; }

<div class="classA classB">123</div> <div class="classB classA">123</div>

一种解决方法是复制那类名：

div { width: 100px; border: 1px solid red; margin: 10px; color: white; } .classA, .classA.classA { background: blue; } .classB { background: black; }

<div class="classA classB">123</div>

在第二个示例中，背景为蓝色（因为CSS定义中有.classA.classA。

来源

2016-11-30 19:12:48 Dekel

基于我提供的CSS我有.dollar_input {width：150px;}设置在survey_txtBx之后，但我仍然获得50px的宽度？我将清除我的缓存并重新加载页面，以验证我的更改是否已被拾取。但基于你的回答不应该我的代码工作？ – Denoteone

它应该，但没有实际看你的HTML + CSS这很难说。顺便说一句，这里的投票会很好:)你知道。 – Dekel

@Denoteone，它解决你的问题吗？请不要忘记投票/接受答案。谢谢！ – Dekel

影响通过CSS：

.dollar_input.survey_txtBx { 
    width: 150px; 
}

这应被视为最后的解决方案，但作为一个快速的解决方法!important应该工作覆盖。

.dollar_input { 
    width: 150px !important; 
}

来源

2016-11-30 19:15:39 Syden

我也将此视为可能的解决方案。如果我无法弄清楚发生了什么，我会考虑这个选项。谢谢！ – Denoteone

如果其余的设置非常好，你只需要完成这一步，就不要再看！ – Syden

顺序无关紧要。 – BenG

如果两个类都应用于同一个元素，你无法控制的类名称的顺序，下面应该工作

.survey_txtBx { 
    width: 50px; 

    &.dollar_input{ 
    width:150px; 
    } 
}

来源

2016-11-30 19:16:38 Randy

LESS/CSS加入第二类的输入来覆盖

回答

相关问题