Html 突出显示时删除文本上方/下方的空格

在本例中，我可以使用线条高度和高度来删除文本上方和下方的空白

@导入url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
跨度{
字体大小：50px；
字号：600；
字体系列：“Roboto”；
显示：内联块；
垂直对齐：顶部；
高度：.75em；
线高：.75em；
背景颜色：金色；
}
noselect先生{
用户选择：无；
}
.上{
字体大小：20px；
位置：相对；//编辑2
}
.lower:：selection{background:none；}//编辑1

上
LOWER

在评论中讨论后，我建议使用

：：selection{background:none；}

与OP使用

position:relative

相结合，解决了这一特定背景下的问题：

@导入url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
跨度{
字体大小：50px；
字号：600；
字体系列：“Roboto”；
显示：内联块；
垂直对齐：顶部；
高度：.75em；
线高：.75em；
背景颜色：金色；
}
noselect先生{
用户选择：无；
}
.上{
字体大小：20px；
位置：相对位置；
}
.lower:：selection{
背景：无；
}

上
下

尽管有重叠，我还是能够选择这两个单词。实际的问题是什么？我想OP只是希望在选择“LOWER”时“UPPER”文本可见。我想你不能用

：：selection{background:none；}

删除这个特定区域的背景？是的，这就是我想要的。更具体地说。我希望能够在光标位于与上文本重叠的下文本的灰色区域时选择上文本。@chriskirknielsen您对：：选择的建议很有效。我还得再测试一下，不过到目前为止还不错。谢谢。@chriskirknielsen添加了位置：相对。再加上你的建议，使这项工作完美无瑕。如果你想把它作为一个答案，我可以接受。谢谢