direkter Zugriff durch ID

[Kalle]

Hi Leute. Ich hab grad schon die CSS-Doku bemüht aber keine Erklärung für folgendes Phänomen gefunden:

Diesen Block möchte ich mit CSS stylen. Unnötiges hab ich weggeschnitten.

<div id="intro">
    ...
    <form method="post" action="#">
        <label>Benutzername:</label><input type="text" name="username" />
        <label>Pa&szlig;wort:</label><input type="password" name="password" />
        <input id="submitbutton" type="submit" value="Anmelden" />
    </form>
</div>

Das verwendete Stylesheet enthält diese Angaben.

#intro form label, #intro form input {
    display: block;
    margin: 0px;
    padding: 0px;
}
#intro form input {
    width: 100%;
    margin: 5px 0px 15px 0px;
}

Um nun den Submit-Button von der Breitenangabe auszunehmen, habe ich eine weitere Angabe ins Stylesheet eingefügt.

#submitbutton { width: auto; }

Allerdings bewirkt das nichts. Erst wenn ich

#intro form #submitbutton { width: auto; }

verwende, kommts beim Submit-Button an. Das W3C empfiehlt zwar, die Elemente nicht wie wild mit IDs zu bestücken und nur darüber in CSS anzusprechen, wenn es auch anders geht, aber funktionieren sollte es doch trotzdem. Die ID kennzeichnet das Element ja eindeutig. Warum muß ich mit "#intro form" erst "einen Weg dahin zeigen"?