Изменение ширины элемента с помощью addClass JQuery

Question

Я пытаюсь изменить ширину элемента с помощью функции addClass, но он не работает. Элемент, который я пытаюсь изменить, имеет ширину, установленную через начальный класс, и я пытаюсь изменить ее, добавив новый класс. Класс добавляется, но свойство игнорируется. Почему это?

Элемент, который я пытаюсь изменить:

<div class="LineOne"></div> 

Initial CSS:

.LineOne { 
    width: 60%; 
    border-style: solid; 
    border-width: 2px; 
    border-radius: 1px; 
    border-color: #FCFFF5; 
    margin: 2px 0 2px 0; 
    -webkit-transition: all 0.4s; 
    transition: all 0.4s; 
} 

JQuery, который я использую, чтобы изменить его:

$(".LineOne").addClass("LineOneWidth"); 

И соответствующий CSS:

.LineOneWidth { 
    width: 20%; 
} 

Спасибо!

Answer 1

Как выглядит ваш код? Возможно, синтаксис неверен.

$('.item').addClass('new-class'); works fine to me. 

Answer 2

Если два класса пытаются установить ширину элемента, то будет использоваться тот, который ниже в коде. Если это не так, рассмотрите спецификацию CSS или опубликуйте дополнительную информацию.

В случае

.one { 
    width: 100px; 
} 

.two { 
    width: 200px; 
} 

Где оба класса присутствуют на элемент, указанный элемент будет иметь ширину 200px, однако написать это:

div.one { 
    width: 100px; 
} 

.two { 
    width: 200px; 
} 

И применять их как к div, и вы увидите, что div будет 100px в ширину. Это связано с тем, что первый селектор теперь более «специфичен». Больше правил делает его более сильным при принятии решений, которые нужно использовать.