Почему внешний и внутренний CSS-код воспринимается по-разному?

Есть HTML-файл. Там есть форма и текст.

<link rel="stylesheet" href="3.css">
<input type="text">
<div class="div_sel">Lorem ipsum dolor sit ameti.</div>

Есть CSS-файл. Он:

1. заставляет форму менять цвет в фокусе
   
2. заставляет текст менять цвет при выделении.

input:focus{background-color: aqua}
.div_sel::selection{color: green;}

Есть проблема:
Пока CSS-код во внешнем файле - CSS-код работает только на форме.
Текст будет менять цвет только в случае удаления формы () из HTML-файла.
Но, если сунуть CSS-код в сам HTML-файла, то всё работает, и форма, и текст:

<style>
input:focus{background-color: aqua}
.div_sel::selection{color: green;}
</style>
<input type="text">
<div class="div_sel">Lorem ipsum dolor sit ameti.</div>

Вопрос: в чём дело?

PS вдогонку:
Не работает в Опера 45.0 и в Хром 58.0.
Всё работает в IE 11 и в Edge 38.
Валидатор jigsaw.w3.org ругается на ::selection.
Webref.ru говорит, что "...Псевдоэлемент ::selection удалён из спецификации CSS3".