Html 如何使轻触高光仅显示在父元素上，而不显示在子元素上？

假设我在iOS上呈现此标记：

<a href="#" class="book">
  <span class="title">Robinson Crusoe</span>
  <span class="author">Daniel Defoe</span>
</a>

我希望用户看到以下内容：

+-----------+
|###########|
|###########|
+-----------+

我尝试过这样的代码：

.book {
  -webkit-tap-highlight-color: initial;
}

.book * {
  -webkit-tap-highlight-color: none;
}

该代码将抑制子跨度上的高光，但也将抑制父跨度上的高光，因此最终不会突出显示任何内容，这不是我想要的

我试着在谷歌上搜索，但似乎找不到任何东西，除了，这似乎与我的问题无关

---

有人有过这样做的经验吗？

在尝试了伪类之后，终于找到了这样做的方法：

.book {
  -webkit-tap-highlight-color: transparent;
}

.book:active {
  background-color: #efefef /* tap color */;
}

之所以有效，是因为iOS Safari应用了：启动时的活动样式

.book {
  -webkit-tap-highlight-color: transparent;
}

.book:active {
  background-color: #efefef /* tap color */;
}