Can't override css of element

I have a website with a global template that contains partial templates, but now I'm stuck with a simple CSS problem:

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

In a global stylesheet the default width for all <select> elements inside #context is defined:

div#context select
{
   width: 500px;
}

Partial CSS

Now for the partial template (which renders content inside #context), I need to override the default width of <select>. I thought this would be as simple as:

select#test
{
    width: 150px;
}

But I was wrong, it doesn't work. And I guess it is because css thinks div#context select is a better match for the element, because it works when I change the partial template css like this:

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

Of course, this is not what I want to do, because the partial template should not know in which node it is rendered inside the global template.

Any ideas on how I can override the style for the partial template without specifying an element from the global template?

See jsFiddle