Faire en sorte qu'un sélecteur de classe CSS remplace un sélecteur d'identifiant CSS

Question

J'essaie d'obtenir un sélecteur de classe css pour remplacer un sélecteur d'id... la raison pour laquelle je veux faire cela est que j'essaie de créer un design de site web jQuery qui a des boîtes sur la gauche, lorsque ces boîtes sont cliquées, toute boîte ouverte se réduit et celle cliquée s'ouvre.... Les boîtes sont désignées par un id comme pour la nième boîte id="box_n" et quand une boîte est ouverte, on lui donne la classe "selected" afin qu'il puisse être vu par le jQuery comme la boîte qui doit être minimisée lorsqu'une autre boîte est sélectionnée. Cependant, je souhaite que les cases sélectionnées puissent défiler, et donc que la fonction "selected" doit remplacer l'option "box_n" L'attribut de défilement id qui est défini comme scroll:hidden . Existe-t-il un moyen de faire cela simplement ? Voici le css que j'ai...

.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;
}

et le jQuery est ici :

$("#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;

Merci pour votre aide !

Answer 1

Utilisez !important sur vos règles. Il les rendra prioritaires sur tout le reste.

.selected
{
    overflow: scroll !important;
}

Answer 2

Essayez

.selected
{
overflow: scroll!important;
}

Cela ajoutera au poids du paramètre de débordement sur la boîte sélectionnée.