Наличие селектора класса CSS переопределяет селектор идентификатора CSS

Question

Я пытаюсь заставить селектор класса css переопределить селектор идентификаторов ... причина, по которой я не хочу этого делать, заключается в том, что я пытаюсь создать дизайн веб-сайта jQuery с полями слева, когда эти поля щелчок мышью, любое открытое окно сворачивается, и открывается одно нажатие ... Ящики обозначаются идентификатором, например, для n-го ящика id="box_n", а когда ящик открывается, ему присваивается класс "selected", чтобы его можно было увидеть jQuery как поле, которое нужно свернуть, когда выбрано другое поле. Однако я хочу, чтобы выбранные поля были прокручиваемыми, и поэтому класс "selected" должен переопределить атрибут прокрутки "box_n" id, который установлен в scroll:hidden. Есть ли способ сделать это просто? Вот CSS, который у меня есть ...

.selected
{
overflow: scroll;
}

#box_1
{
background-color:#000;
position: absolute;
opacity: 0.6;
top: 0px;
left: -100px;
margin-right:auto;
float: left;
height: 65px;
width: 135px;
border-radius:4px;
-moz-border-radius:4px; /* Firefox 3.6 and earlier */
overflow:hidden;
}

и jQuery здесь:

$("#box_3")
    .animate({
        width: largeWidth,
        left: 60,
        top: 0,
        borderRadius: 10,
        MozborderRadius: 10
    }, (60), "swing")
    .animate({
        height: largeHeight
    }, (60), "swing")
    .animate({
        opacity: 1
    }, (160));

$("#box_3").addClass("selected");
selected = 1;

Спасибо за вашу помощь!

Answer 1

Используйте !important в ваших правилах.Это заставит их переопределить все остальное.

.selected
{
    overflow: scroll !important;
}

Answer 2

Попробуйте

.selected
{
overflow: scroll!important;
}

Это добавит к весу параметра переполнения в .selected box.