Ne pouvez pas remplacer le css de l'élément

J'ai un site web avec un modèle global qui contient partielle des modèles, mais maintenant je suis coincé avec un simple CSS problème:

HTML

<div id="context"> <!-- this is part of global template -->
    <!-- this is rendered by partial template -->
    <select id="test">
        <option>[Select a value]</option>
    </select>
</div>

Global CSS

Dans une feuille de style par défaut de la largeur de toutes les <select> éléments à l'intérieur de #context est défini:

div#context select
{
   width: 500px;
}

Partielle CSS

Maintenant pour la partie du modèle (ce qui rend le contenu à l'intérieur de #context), j'ai besoin de remplacer la valeur par défaut de la largeur de <select>. Je pensais que ce serait aussi simple que:

select#test
{
    width: 150px;
}

Mais j'ai eu tort, il ne fonctionne pas. Et je suppose que c'est parce que css pense div#context select est un meilleur match pour l'élément, parce qu'il fonctionne lorsque je change la partielle template css comme ceci:

div#context select#test
{
    width: 150px;
}

Bien sûr, ce n'est pas ce que je veux faire, parce que la partielle modèle ne doit pas savoir dans quel nœud, il est rendu à l'intérieur du modèle global.

Des idées sur comment je peut surcharger le style pour la partie du modèle, sans spécification d'un élément à partir du modèle global?

Voir jsFiddle

OriginalL'auteur huysentruitw | 2013-08-25