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 --> Sei que já há uma [pergunta relacionada][1], mas 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ê ? [1]: https://pt.stackoverflow.com/questions/39875/qual-a-prioridade-do-html-id-ou-class