禁用嵌套跨度上的文本选择（React / Electron）

Question

我有一些嵌套的跨度。

<span>
 <span>Title</span>
 <span>Author</span>
 <span>Year</span>
</span>

当用户尝试选择它们时，将选择所有内容（所选文本后面的蓝色背景）。但是，我希望只能选择一个范围，这样用户就不会出错，只能选择例如作者字段。

我尝试通过这样做使其他字段无法选择：

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;
}

然后在我的html中：

<span>
 <span class="unselectable">Title</span>
 <span>Author</span>
 <span class="unselectable">Year</span>
</span>

但它不起作用，我仍然可以选择一切。我正在使用React＆amp;电子，如果这应该有所作为。