Minha dúvida é bem objetiva.  
**Tratando-se de seletores css.**  
Tenho o seguinte código `HTML` e `CSS`:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#element    p{color:blue;}
.element    p{color:red;}
div         p{color:pink;}
div.element p{color:yellow;}
div[name="element"] p{color:purple;}
div p:first-child{color:brown;}
div p:nth-child(1){color:white;}

<!-- language: lang-html -->

    <div class="element" id="element" name="element">
         <p>Elemento</p>
    </div>

<!-- end snippet -->

*Nesse caso estou tratando com uma série de seletores, e não somente `classe` e `id`.*  
Porque é aplicado o estilo do seletor `id` ?  
Porque o `id` tem prioridade em cima dos outros **tantos** seletores, já que os demais vem depois dele ?  
Na última linha de estilo eu tenho um caminho com **3 seletores** e mesmo assim o `id` tem prioridade, porquê ?