Div с автоматическим выбором пользователя не работает, вложенный в пользовательский выбор none

Question

Я делаю div невыбираемым, и я хочу снова включить выделение в некоторых вложенных div.

<div style="user-select: none; -ms-user-select: none; color: red;">
  <div id="noSelection">
    Should not be able to select this text
  </div>
  <div id="selectIt" style="user-select: auto; -ms-user-select:auto; color: green;">
    Wanna select this text as normal with correct mouse cursor
  </div>
</div>

Я ожидал выделить текст как обычно в последнем div с установленным «auto», но он не работает ни в одном браузере, который я пробую.

Answer 1

Вместо user-select: auto; используйте user-select: text; для выбора текста.В спецификации указано при использовании auto:

, если вычисленное значение user-select для родителя этого элемента равно none, вычисленное значение равно none

<div style="user-select: none; -ms-user-select: none; color: red;">
  <div id="noSelection">
    Should not be able to select this text
  </div>
  <div id="selectIt" style="user-select: text; -ms-user-select:auto; color: green;">
    Wanna select this text as normal with correct mouse cursor
  </div>
</div>