Como mudar a cor de textos selecionados pelo mouse com CSS

Sabe quando você seleciona um texto com o mouse? O texto fica com fundo azul e com as letras brancas, certo? Então, você sabia que é possível mudar isso com apenas algumas linhas de CSS? Sim, é possível! \o/

Porém - ah, porém... - funciona somente no Firefox, Safari, Chrome e Opera. No Internet Explorer, não. Mas whatever, nada funciona naquela bagaça mesmo. Vamos ao código.

::-moz-selection{
    background:#3b096d;
    color:#fff;
}
::selection {
    background:#3b096d;
    color:#fff;
}

O segredo é o pseudo-seletor ::selection, que estava especificado em um rascunho da W3C para o CSS 3 - acho que agora foi removido, não tenho certeza. Para aplicar cores diferentes em tags específicas:

pre::-moz-selection{
    background:#3b096d;
    color:#fff;
}
pre::selection {
    background:#3b096d;
    color:#fff;
}

No exemplo eu usei a tag pre, mas você pode usar qualquer tag e diferenciar a seleção. Veja o resultado:

Lembrete: somente as propriedades background e color são aceitas.

Leia mais sobre este seletor no Mozilla Developer Center.